@keyfunc/keybricks-ds 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (418) hide show
  1. package/DEPLOY.md +204 -0
  2. package/DESIGN.md +269 -0
  3. package/INTEGRATION.md +417 -0
  4. package/SKILL.md +32 -0
  5. package/_adherence.oxlintrc.json +1469 -0
  6. package/_scripts/build-index.mjs +80 -0
  7. package/_scripts/build-tokens.mjs +135 -0
  8. package/assets/icons/icon-index.js +1 -0
  9. package/assets/icons/icon-index.json +1 -0
  10. package/assets/icons/unicons-index.js +1 -0
  11. package/assets/icons/unicons-index.json +1 -0
  12. package/assets/keybricks-logo.png +0 -0
  13. package/components/_cards/accordion.card.html +32 -0
  14. package/components/_cards/action-chip.card.html +22 -0
  15. package/components/_cards/activity.card.html +34 -0
  16. package/components/_cards/alert.card.html +32 -0
  17. package/components/_cards/app-chrome.card.html +36 -0
  18. package/components/_cards/banner.card.html +21 -0
  19. package/components/_cards/brand-visual.card.html +43 -0
  20. package/components/_cards/breadcrumb.card.html +23 -0
  21. package/components/_cards/button-1-base.card.html +39 -0
  22. package/components/_cards/button-2-states.card.html +56 -0
  23. package/components/_cards/button-3-sizes-icons.card.html +32 -0
  24. package/components/_cards/button-4-group.card.html +47 -0
  25. package/components/_cards/canvas-zoom-controls.card.html +19 -0
  26. package/components/_cards/cards-indicators.card.html +59 -0
  27. package/components/_cards/charts-1-sparkline.card.html +55 -0
  28. package/components/_cards/charts-10-gauge.card.html +31 -0
  29. package/components/_cards/charts-11-funnel.card.html +28 -0
  30. package/components/_cards/charts-12-treemap.card.html +23 -0
  31. package/components/_cards/charts-14-radar.card.html +31 -0
  32. package/components/_cards/charts-15-distribution.card.html +32 -0
  33. package/components/_cards/charts-16-pareto.card.html +25 -0
  34. package/components/_cards/charts-17-candlestick.card.html +34 -0
  35. package/components/_cards/charts-18-sankey.card.html +29 -0
  36. package/components/_cards/charts-19-chord.card.html +31 -0
  37. package/components/_cards/charts-2-line.card.html +46 -0
  38. package/components/_cards/charts-20-sunburst.card.html +38 -0
  39. package/components/_cards/charts-21-worldmap.card.html +33 -0
  40. package/components/_cards/charts-22-gantt.card.html +37 -0
  41. package/components/_cards/charts-23-bar3d.card.html +26 -0
  42. package/components/_cards/charts-24-pie3d.card.html +32 -0
  43. package/components/_cards/charts-25-surface3d.card.html +24 -0
  44. package/components/_cards/charts-26-scatter3d.card.html +24 -0
  45. package/components/_cards/charts-27-ribbon3d.card.html +23 -0
  46. package/components/_cards/charts-3-bar.card.html +71 -0
  47. package/components/_cards/charts-4-barlist.card.html +30 -0
  48. package/components/_cards/charts-5-donut.card.html +35 -0
  49. package/components/_cards/charts-6-scatter.card.html +26 -0
  50. package/components/_cards/charts-7-heatmap.card.html +28 -0
  51. package/components/_cards/charts-8-waterfall.card.html +25 -0
  52. package/components/_cards/charts-9-bullet.card.html +31 -0
  53. package/components/_cards/charts-99-fullpage.card.html +194 -0
  54. package/components/_cards/checkbox.card.html +34 -0
  55. package/components/_cards/codeblock.card.html +19 -0
  56. package/components/_cards/combobox.card.html +25 -0
  57. package/components/_cards/context-menu.card.html +21 -0
  58. package/components/_cards/datatable.card.html +48 -0
  59. package/components/_cards/date-picker.card.html +31 -0
  60. package/components/_cards/diffvalue.card.html +21 -0
  61. package/components/_cards/divider.card.html +24 -0
  62. package/components/_cards/drawer.card.html +30 -0
  63. package/components/_cards/dropdown-menu.card.html +38 -0
  64. package/components/_cards/dropzone.card.html +22 -0
  65. package/components/_cards/empty-state.card.html +29 -0
  66. package/components/_cards/filter-bar.card.html +34 -0
  67. package/components/_cards/icon-button.card.html +27 -0
  68. package/components/_cards/icons-1-core.card.html +49 -0
  69. package/components/_cards/icons-2-feather.card.html +39 -0
  70. package/components/_cards/icons-3-unicons.card.html +44 -0
  71. package/components/_cards/input.card.html +25 -0
  72. package/components/_cards/kbd.card.html +20 -0
  73. package/components/_cards/keyvalue.card.html +23 -0
  74. package/components/_cards/listrow.card.html +30 -0
  75. package/components/_cards/loading.card.html +33 -0
  76. package/components/_cards/log-viewer.card.html +23 -0
  77. package/components/_cards/modal.card.html +35 -0
  78. package/components/_cards/multi-select.card.html +26 -0
  79. package/components/_cards/number-stepper.card.html +24 -0
  80. package/components/_cards/pagination.card.html +25 -0
  81. package/components/_cards/people.card.html +46 -0
  82. package/components/_cards/pipeline-node.card.html +76 -0
  83. package/components/_cards/pipeline-palette.card.html +54 -0
  84. package/components/_cards/search.card.html +23 -0
  85. package/components/_cards/select.card.html +23 -0
  86. package/components/_cards/slider.card.html +25 -0
  87. package/components/_cards/smart-table.card.html +37 -0
  88. package/components/_cards/spreadsheet.card.html +31 -0
  89. package/components/_cards/stepper.card.html +25 -0
  90. package/components/_cards/tabs.card.html +25 -0
  91. package/components/_cards/tag.card.html +26 -0
  92. package/components/_cards/textarea.card.html +27 -0
  93. package/components/_cards/timeline.card.html +32 -0
  94. package/components/_cards/toast.card.html +33 -0
  95. package/components/_cards/toggles.card.html +68 -0
  96. package/components/_cards/tooltip.card.html +22 -0
  97. package/components/_cards/tree.card.html +150 -0
  98. package/components/_shared/frame-theme.js +16 -0
  99. package/components/_shared/src-brand.js +1 -0
  100. package/components/_shared/src-buttons.js +1 -0
  101. package/components/_shared/src-charts.js +1 -0
  102. package/components/_shared/src-data.js +1 -0
  103. package/components/_shared/src-display.js +1 -0
  104. package/components/_shared/src-feedback.js +1 -0
  105. package/components/_shared/src-forms.js +1 -0
  106. package/components/_shared/src-icons.js +1 -0
  107. package/components/_shared/src-navigation.js +1 -0
  108. package/components/_shared/src-pipeline.js +1 -0
  109. package/components/_shared/src-tabs.js +1 -0
  110. package/components/_shared/svg-download.js +19 -0
  111. package/components/_shared/view-source.js +185 -0
  112. package/components/_vue/index.mjs +114 -0
  113. package/components/brand/BrandVisual.d.ts +17 -0
  114. package/components/brand/BrandVisual.jsx +29 -0
  115. package/components/brand/BrandVisual.vue +34 -0
  116. package/components/brand/_dir.card.html +13 -0
  117. package/components/brand/brandMotifs.js +210 -0
  118. package/components/buttons/ActionChip.d.ts +10 -0
  119. package/components/buttons/ActionChip.jsx +20 -0
  120. package/components/buttons/ActionChip.vue +18 -0
  121. package/components/buttons/Button.d.ts +40 -0
  122. package/components/buttons/Button.jsx +101 -0
  123. package/components/buttons/Button.vue +87 -0
  124. package/components/buttons/IconButton.d.ts +26 -0
  125. package/components/buttons/IconButton.jsx +28 -0
  126. package/components/buttons/IconButton.vue +21 -0
  127. package/components/buttons/_dir.card.html +13 -0
  128. package/components/buttons/buttons.prompt.md +19 -0
  129. package/components/charts/Bar3D.d.ts +15 -0
  130. package/components/charts/Bar3D.jsx +93 -0
  131. package/components/charts/Bar3D.vue +79 -0
  132. package/components/charts/BarChart.d.ts +23 -0
  133. package/components/charts/BarChart.jsx +135 -0
  134. package/components/charts/BarChart.vue +139 -0
  135. package/components/charts/BarList.d.ts +13 -0
  136. package/components/charts/BarList.jsx +31 -0
  137. package/components/charts/BarList.vue +25 -0
  138. package/components/charts/BoxPlot.d.ts +18 -0
  139. package/components/charts/BoxPlot.jsx +62 -0
  140. package/components/charts/BoxPlot.vue +58 -0
  141. package/components/charts/BulletChart.d.ts +12 -0
  142. package/components/charts/BulletChart.jsx +41 -0
  143. package/components/charts/BulletChart.vue +33 -0
  144. package/components/charts/CandlestickChart.d.ts +15 -0
  145. package/components/charts/CandlestickChart.jsx +63 -0
  146. package/components/charts/CandlestickChart.vue +62 -0
  147. package/components/charts/ChartKit.d.ts +8 -0
  148. package/components/charts/ChartKit.jsx +76 -0
  149. package/components/charts/ChartKit.vue +47 -0
  150. package/components/charts/ChordChart.d.ts +13 -0
  151. package/components/charts/ChordChart.jsx +55 -0
  152. package/components/charts/ChordChart.vue +54 -0
  153. package/components/charts/DonutChart.d.ts +15 -0
  154. package/components/charts/DonutChart.jsx +73 -0
  155. package/components/charts/DonutChart.vue +61 -0
  156. package/components/charts/FunnelChart.d.ts +11 -0
  157. package/components/charts/FunnelChart.jsx +37 -0
  158. package/components/charts/FunnelChart.vue +29 -0
  159. package/components/charts/GanttChart.d.ts +20 -0
  160. package/components/charts/GanttChart.jsx +80 -0
  161. package/components/charts/GanttChart.vue +60 -0
  162. package/components/charts/GaugeChart.d.ts +13 -0
  163. package/components/charts/GaugeChart.jsx +33 -0
  164. package/components/charts/GaugeChart.vue +29 -0
  165. package/components/charts/HeatmapChart.d.ts +13 -0
  166. package/components/charts/HeatmapChart.jsx +62 -0
  167. package/components/charts/HeatmapChart.vue +38 -0
  168. package/components/charts/Histogram.d.ts +16 -0
  169. package/components/charts/Histogram.jsx +56 -0
  170. package/components/charts/Histogram.vue +53 -0
  171. package/components/charts/LineChart.d.ts +17 -0
  172. package/components/charts/LineChart.jsx +84 -0
  173. package/components/charts/LineChart.vue +86 -0
  174. package/components/charts/ParetoChart.d.ts +13 -0
  175. package/components/charts/ParetoChart.jsx +54 -0
  176. package/components/charts/ParetoChart.vue +55 -0
  177. package/components/charts/Pie3D.d.ts +17 -0
  178. package/components/charts/Pie3D.jsx +145 -0
  179. package/components/charts/Pie3D.vue +115 -0
  180. package/components/charts/RadarChart.d.ts +14 -0
  181. package/components/charts/RadarChart.jsx +79 -0
  182. package/components/charts/RadarChart.vue +73 -0
  183. package/components/charts/Ribbon3D.d.ts +13 -0
  184. package/components/charts/Ribbon3D.jsx +89 -0
  185. package/components/charts/Ribbon3D.vue +79 -0
  186. package/components/charts/SankeyChart.d.ts +15 -0
  187. package/components/charts/SankeyChart.jsx +59 -0
  188. package/components/charts/SankeyChart.vue +53 -0
  189. package/components/charts/Scatter3D.d.ts +12 -0
  190. package/components/charts/Scatter3D.jsx +69 -0
  191. package/components/charts/Scatter3D.vue +59 -0
  192. package/components/charts/ScatterChart.d.ts +12 -0
  193. package/components/charts/ScatterChart.jsx +53 -0
  194. package/components/charts/ScatterChart.vue +57 -0
  195. package/components/charts/Sparkline.d.ts +19 -0
  196. package/components/charts/Sparkline.jsx +63 -0
  197. package/components/charts/Sparkline.vue +54 -0
  198. package/components/charts/SunburstChart.d.ts +12 -0
  199. package/components/charts/SunburstChart.jsx +61 -0
  200. package/components/charts/SunburstChart.vue +60 -0
  201. package/components/charts/Surface3D.d.ts +13 -0
  202. package/components/charts/Surface3D.jsx +70 -0
  203. package/components/charts/Surface3D.vue +63 -0
  204. package/components/charts/TreemapChart.d.ts +11 -0
  205. package/components/charts/TreemapChart.jsx +35 -0
  206. package/components/charts/TreemapChart.vue +27 -0
  207. package/components/charts/WaterfallChart.d.ts +11 -0
  208. package/components/charts/WaterfallChart.jsx +59 -0
  209. package/components/charts/WaterfallChart.vue +46 -0
  210. package/components/charts/WorldMap.d.ts +21 -0
  211. package/components/charts/WorldMap.jsx +107 -0
  212. package/components/charts/WorldMap.vue +73 -0
  213. package/components/charts/_dir.card.html +7 -0
  214. package/components/charts/chart-3d.js +84 -0
  215. package/components/charts/chart-geometry.js +223 -0
  216. package/components/charts/charts.prompt.md +24 -0
  217. package/components/data/CodeBlock.d.ts +9 -0
  218. package/components/data/CodeBlock.jsx +19 -0
  219. package/components/data/CodeBlock.vue +22 -0
  220. package/components/data/DataTable.d.ts +28 -0
  221. package/components/data/DataTable.jsx +32 -0
  222. package/components/data/DataTable.vue +25 -0
  223. package/components/data/DiffValue.d.ts +11 -0
  224. package/components/data/DiffValue.jsx +15 -0
  225. package/components/data/DiffValue.vue +13 -0
  226. package/components/data/FilterBar.d.ts +16 -0
  227. package/components/data/FilterBar.jsx +22 -0
  228. package/components/data/FilterBar.vue +23 -0
  229. package/components/data/KeyValue.d.ts +16 -0
  230. package/components/data/KeyValue.jsx +25 -0
  231. package/components/data/KeyValue.vue +26 -0
  232. package/components/data/ListRow.d.ts +14 -0
  233. package/components/data/ListRow.jsx +25 -0
  234. package/components/data/ListRow.vue +25 -0
  235. package/components/data/Pagination.d.ts +12 -0
  236. package/components/data/Pagination.jsx +27 -0
  237. package/components/data/Pagination.vue +24 -0
  238. package/components/data/SmartTable.d.ts +30 -0
  239. package/components/data/SmartTable.jsx +73 -0
  240. package/components/data/SmartTable.vue +74 -0
  241. package/components/data/Spreadsheet.d.ts +33 -0
  242. package/components/data/Spreadsheet.jsx +110 -0
  243. package/components/data/Spreadsheet.vue +95 -0
  244. package/components/data/_dir.card.html +13 -0
  245. package/components/data/data.prompt.md +33 -0
  246. package/components/display/Avatar.d.ts +21 -0
  247. package/components/display/Avatar.jsx +31 -0
  248. package/components/display/Avatar.vue +34 -0
  249. package/components/display/Badge.d.ts +27 -0
  250. package/components/display/Badge.jsx +40 -0
  251. package/components/display/Badge.vue +47 -0
  252. package/components/display/Card.d.ts +27 -0
  253. package/components/display/Card.jsx +27 -0
  254. package/components/display/Card.vue +28 -0
  255. package/components/display/Divider.d.ts +8 -0
  256. package/components/display/Divider.jsx +14 -0
  257. package/components/display/Divider.vue +13 -0
  258. package/components/display/Kbd.d.ts +7 -0
  259. package/components/display/Kbd.jsx +12 -0
  260. package/components/display/Kbd.vue +9 -0
  261. package/components/display/ProgressBar.d.ts +42 -0
  262. package/components/display/ProgressBar.jsx +70 -0
  263. package/components/display/ProgressBar.vue +69 -0
  264. package/components/display/Tag.d.ts +9 -0
  265. package/components/display/Tag.jsx +15 -0
  266. package/components/display/Tag.vue +15 -0
  267. package/components/display/_dir.card.html +13 -0
  268. package/components/display/display.prompt.md +30 -0
  269. package/components/feedback/Accordion.d.ts +13 -0
  270. package/components/feedback/Accordion.jsx +21 -0
  271. package/components/feedback/Accordion.vue +22 -0
  272. package/components/feedback/ActivityItem.d.ts +25 -0
  273. package/components/feedback/ActivityItem.jsx +39 -0
  274. package/components/feedback/ActivityItem.vue +46 -0
  275. package/components/feedback/Alert.d.ts +36 -0
  276. package/components/feedback/Alert.jsx +48 -0
  277. package/components/feedback/Alert.vue +59 -0
  278. package/components/feedback/Banner.d.ts +15 -0
  279. package/components/feedback/Banner.jsx +25 -0
  280. package/components/feedback/Banner.vue +25 -0
  281. package/components/feedback/ContextMenu.d.ts +8 -0
  282. package/components/feedback/ContextMenu.jsx +18 -0
  283. package/components/feedback/ContextMenu.vue +19 -0
  284. package/components/feedback/Drawer.d.ts +18 -0
  285. package/components/feedback/Drawer.jsx +26 -0
  286. package/components/feedback/Drawer.vue +24 -0
  287. package/components/feedback/Menu.d.ts +10 -0
  288. package/components/feedback/Menu.jsx +24 -0
  289. package/components/feedback/Menu.vue +21 -0
  290. package/components/feedback/Modal.d.ts +38 -0
  291. package/components/feedback/Modal.jsx +69 -0
  292. package/components/feedback/Modal.vue +65 -0
  293. package/components/feedback/Stepper.d.ts +9 -0
  294. package/components/feedback/Stepper.jsx +24 -0
  295. package/components/feedback/Stepper.vue +18 -0
  296. package/components/feedback/Timeline.d.ts +15 -0
  297. package/components/feedback/Timeline.jsx +27 -0
  298. package/components/feedback/Timeline.vue +21 -0
  299. package/components/feedback/_dir.card.html +13 -0
  300. package/components/feedback/feedback.prompt.md +35 -0
  301. package/components/forms/Checkbox.d.ts +13 -0
  302. package/components/forms/Checkbox.jsx +17 -0
  303. package/components/forms/Checkbox.vue +18 -0
  304. package/components/forms/Combobox.d.ts +13 -0
  305. package/components/forms/Combobox.jsx +34 -0
  306. package/components/forms/Combobox.vue +35 -0
  307. package/components/forms/DatePicker.d.ts +12 -0
  308. package/components/forms/DatePicker.jsx +48 -0
  309. package/components/forms/DatePicker.vue +46 -0
  310. package/components/forms/Dropzone.d.ts +20 -0
  311. package/components/forms/Dropzone.jsx +36 -0
  312. package/components/forms/Dropzone.vue +28 -0
  313. package/components/forms/Field.d.ts +13 -0
  314. package/components/forms/Field.jsx +13 -0
  315. package/components/forms/Field.vue +12 -0
  316. package/components/forms/Input.d.ts +18 -0
  317. package/components/forms/Input.jsx +35 -0
  318. package/components/forms/Input.vue +38 -0
  319. package/components/forms/MultiSelect.d.ts +14 -0
  320. package/components/forms/MultiSelect.jsx +33 -0
  321. package/components/forms/MultiSelect.vue +36 -0
  322. package/components/forms/NumberStepper.d.ts +13 -0
  323. package/components/forms/NumberStepper.jsx +15 -0
  324. package/components/forms/NumberStepper.vue +17 -0
  325. package/components/forms/Radio.vue +16 -0
  326. package/components/forms/RadioGroup.vue +11 -0
  327. package/components/forms/SearchInput.d.ts +12 -0
  328. package/components/forms/SearchInput.jsx +17 -0
  329. package/components/forms/SearchInput.vue +14 -0
  330. package/components/forms/Select.d.ts +14 -0
  331. package/components/forms/Select.jsx +17 -0
  332. package/components/forms/Select.vue +16 -0
  333. package/components/forms/Slider.d.ts +15 -0
  334. package/components/forms/Slider.jsx +21 -0
  335. package/components/forms/Slider.vue +23 -0
  336. package/components/forms/Switch.d.ts +31 -0
  337. package/components/forms/Switch.jsx +40 -0
  338. package/components/forms/Switch.vue +16 -0
  339. package/components/forms/_dir.card.html +13 -0
  340. package/components/forms/forms.prompt.md +23 -0
  341. package/components/icons/Icon.d.ts +19 -0
  342. package/components/icons/Icon.jsx +93 -0
  343. package/components/icons/Icon.prompt.md +8 -0
  344. package/components/icons/Icon.vue +12 -0
  345. package/components/icons/Unicon.d.ts +12 -0
  346. package/components/icons/Unicon.jsx +16 -0
  347. package/components/icons/Unicon.vue +15 -0
  348. package/components/icons/_dir.card.html +13 -0
  349. package/components/icons/feather-paths.js +2 -0
  350. package/components/icons/icon-paths.js +73 -0
  351. package/components/index.d.ts +87 -0
  352. package/components/index.js +110 -0
  353. package/components/navigation/Breadcrumb.d.ts +24 -0
  354. package/components/navigation/Breadcrumb.jsx +120 -0
  355. package/components/navigation/Breadcrumb.vue +94 -0
  356. package/components/navigation/DocTree.d.ts +18 -0
  357. package/components/navigation/DocTree.jsx +37 -0
  358. package/components/navigation/DocTree.vue +25 -0
  359. package/components/navigation/Sidebar.d.ts +29 -0
  360. package/components/navigation/Sidebar.jsx +75 -0
  361. package/components/navigation/Sidebar.vue +54 -0
  362. package/components/navigation/TopBar.d.ts +27 -0
  363. package/components/navigation/TopBar.jsx +44 -0
  364. package/components/navigation/TopBar.vue +51 -0
  365. package/components/navigation/Tree.d.ts +83 -0
  366. package/components/navigation/Tree.jsx +347 -0
  367. package/components/navigation/Tree.vue +258 -0
  368. package/components/navigation/_dir.card.html +13 -0
  369. package/components/navigation/navigation.prompt.md +22 -0
  370. package/components/pipeline/ConfigPanel.d.ts +18 -0
  371. package/components/pipeline/ConfigPanel.jsx +30 -0
  372. package/components/pipeline/ConfigPanel.vue +32 -0
  373. package/components/pipeline/DataPreview.d.ts +14 -0
  374. package/components/pipeline/DataPreview.jsx +24 -0
  375. package/components/pipeline/DataPreview.vue +21 -0
  376. package/components/pipeline/NodeCard.d.ts +47 -0
  377. package/components/pipeline/NodeCard.jsx +97 -0
  378. package/components/pipeline/NodeCard.vue +75 -0
  379. package/components/pipeline/PaletteItem.vue +15 -0
  380. package/components/pipeline/PaletteListItem.vue +15 -0
  381. package/components/pipeline/PalettePanel.d.ts +20 -0
  382. package/components/pipeline/PalettePanel.jsx +74 -0
  383. package/components/pipeline/PalettePanel.vue +45 -0
  384. package/components/pipeline/PipelineCanvas.d.ts +25 -0
  385. package/components/pipeline/PipelineCanvas.jsx +94 -0
  386. package/components/pipeline/PipelineCanvas.vue +73 -0
  387. package/components/pipeline/ZoomControls.d.ts +9 -0
  388. package/components/pipeline/ZoomControls.jsx +15 -0
  389. package/components/pipeline/ZoomControls.vue +15 -0
  390. package/components/pipeline/_dir.card.html +13 -0
  391. package/components/pipeline/pipeline.prompt.md +22 -0
  392. package/components/tabs/SegmentedControl.d.ts +11 -0
  393. package/components/tabs/SegmentedControl.jsx +21 -0
  394. package/components/tabs/SegmentedControl.vue +15 -0
  395. package/components/tabs/Tabs.d.ts +13 -0
  396. package/components/tabs/Tabs.jsx +52 -0
  397. package/components/tabs/Tabs.vue +39 -0
  398. package/components/tabs/ViewToggle.d.ts +8 -0
  399. package/components/tabs/ViewToggle.jsx +12 -0
  400. package/components/tabs/ViewToggle.vue +12 -0
  401. package/components/tabs/_dir.card.html +13 -0
  402. package/components/tabs/tabs.prompt.md +14 -0
  403. package/package.json +76 -0
  404. package/readme.md +150 -0
  405. package/styles.css +10 -0
  406. package/tokens/alpha.css +27 -0
  407. package/tokens/charts.css +55 -0
  408. package/tokens/colors-extended.css +40 -0
  409. package/tokens/colors.css +39 -0
  410. package/tokens/dark.css +96 -0
  411. package/tokens/fonts.css +4 -0
  412. package/tokens/interaction.css +48 -0
  413. package/tokens/layout.css +30 -0
  414. package/tokens/motion.css +22 -0
  415. package/tokens/tokens.d.ts +680 -0
  416. package/tokens/tokens.js +1018 -0
  417. package/tokens/tokens.json +2928 -0
  418. package/tokens/typography.css +22 -0
package/tokens/dark.css ADDED
@@ -0,0 +1,96 @@
1
+ /* Keybricks dark theme — apply with <html data-theme="dark">.
2
+ The source .fig ships a "Dark Mode" nav item but no dark frames, so these values
3
+ are an original, contrast-tested derivation of the light palette (same hue families).
4
+
5
+ PRIMARY BLUE, tested rather than guessed:
6
+ #155dfc (light brand blue) on #0a0a0a → 3.8:1 surround, white label 5.3:1 — label fine, sits heavy/murky on black
7
+ #2b7fff (one step up) on #0a0a0a → 5.3:1 surround, white label 3.8:1 — FAILS AA for the 13px label
8
+ #1f6feb (chosen) on #0a0a0a → 4.3:1 surround, white label 4.6:1 — both pass AA
9
+ So dark keeps the brand hue (~214°) and lands one notch below the light blue in
10
+ luminance: bright enough to separate from the near-black canvas, dark enough to
11
+ carry white 13px type. Light theme is untouched — #155dfc stays the brand blue. */
12
+ [data-theme="dark"]{
13
+ color-scheme:dark;
14
+ /* Surfaces — 4 steps, each ~+6% luminance, so nesting reads without borders */
15
+ --bg-app:#0a0a0a;--bg-surface:#161616;--bg-raised:#1d1d1d;--bg-inset:#1f1f1f;--bg-hover:#262626;--bg-active:#2e2e2e;--bg-scrim:rgba(0,0,0,.6);
16
+ /* Text */
17
+ --text-primary:#fafafa;--text-heading:#f5f5f5;--text-strong:#e5e5e5;--text-body:#d4d4d4;--text-secondary:#a1a1a1;--text-muted:#737373;--text-inverse:#0a0a0a;
18
+ --on-accent:#ffffff;--action-dark-fg:#0a0a0a;
19
+ /* Borders */
20
+ --border-card:rgba(255,255,255,.09);--border-control:#333333;--border-subtle:#242424;--border-strong:#454545;
21
+ /* Actions */
22
+ --action-primary:#1f6feb;--action-primary-hover:#2b7fff;--action-primary-active:#1a5ec9;--action-dark:#fafafa;--action-dark-hover:#e5e5e5;--action-dark-active:#d4d4d4;
23
+ /* Press (active) fills — one step past the hover value in each family */
24
+ --bg-press:#3a3a3a;--soft-active:rgba(43,127,255,.32);--danger-active:#c10007;--danger-soft-active:rgba(251,44,54,.26);
25
+ --focus-ring:rgba(43,127,255,.32);--focus-border:#2b7fff;--selected-border:#51a2ff;
26
+ --soft-bg:rgba(43,127,255,.14);--soft-border:#2b7fff;--soft-hover:rgba(43,127,255,.24);
27
+ --info-bg:rgba(43,127,255,.14);--info-fg:#8ab8ff;
28
+ --link:#7cb0ff;--link-hover:#a8caff;
29
+ /* Structure */
30
+ --track:#303030;--dot-neutral:#737373;--skeleton:#242424;--checkbox-border:#4a4a4a;
31
+ --port-border:#3f3f3f;--dropzone-border:#3a3a3a;--dropzone-border-hover:#525252;
32
+ --edge:#4b5563;--chart-blue:#4d93ff;--purple-500:#c07cff;
33
+ --tooltip-bg:#f5f5f5;--tooltip-fg:#0a0a0a;
34
+ /* Category hues — glyph lifted for contrast, tile tint becomes a low-alpha wash */
35
+ --cat-source:#22c58f;--cat-source-bg:rgba(0,188,125,.16);
36
+ --cat-join:#5b9bff;--cat-join-bg:rgba(43,127,255,.16);
37
+ --cat-transform:#ff8b3d;--cat-transform-bg:rgba(255,105,0,.16);
38
+ --cat-merge:#c07cff;--cat-merge-bg:rgba(152,16,250,.18);
39
+ --cat-output:#22bfb2;--cat-output-bg:rgba(0,150,137,.18);
40
+ /* Status — solid dots keep the brand hue; tints/text lift for legibility */
41
+ --success:#00bc7d;--success-strong:#22c58f;--success-bg:rgba(0,188,125,.14);--success-text:#4ade9f;
42
+ --danger:#fb2c36;--danger-bg:rgba(251,44,54,.14);--danger-text:#ff8085;
43
+ --warning:#ffb900;--warning-bg:rgba(255,185,0,.14);--warning-text:#ffc55c;
44
+ /* Elevation reads as a deeper shadow plus a lighter surface, never a glow */
45
+ --shadow-node:0 1px 3px 0 rgba(0,0,0,.6),0 1px 2px -1px rgba(0,0,0,.5);
46
+ --shadow-selected:0 0 0 2px rgba(43,127,255,.32),0 1px 3px 0 rgba(0,0,0,.6);
47
+ --shadow-menu:0 4px 16px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.4);
48
+ --shadow-modal:0 24px 64px rgba(0,0,0,.7),0 2px 8px rgba(0,0,0,.5);
49
+ }
50
+ [data-theme="dark"] body{background:var(--bg-app);color:var(--text-primary)}
51
+ [data-theme="dark"] img[src$="keybricks-logo.png"]{filter:none}
52
+
53
+ @media (prefers-color-scheme: dark){
54
+ :root{
55
+
56
+ color-scheme:dark;
57
+ /* Surfaces — 4 steps, each ~+6% luminance, so nesting reads without borders */
58
+ --bg-app:#0a0a0a;--bg-surface:#161616;--bg-raised:#1d1d1d;--bg-inset:#1f1f1f;--bg-hover:#262626;--bg-active:#2e2e2e;--bg-scrim:rgba(0,0,0,.6);
59
+ /* Text */
60
+ --text-primary:#fafafa;--text-heading:#f5f5f5;--text-strong:#e5e5e5;--text-body:#d4d4d4;--text-secondary:#a1a1a1;--text-muted:#737373;--text-inverse:#0a0a0a;
61
+ --on-accent:#ffffff;--action-dark-fg:#0a0a0a;
62
+ /* Borders */
63
+ --border-card:rgba(255,255,255,.09);--border-control:#333333;--border-subtle:#242424;--border-strong:#454545;
64
+ /* Actions */
65
+ --action-primary:#1f6feb;--action-primary-hover:#2b7fff;--action-primary-active:#1a5ec9;--action-dark:#fafafa;--action-dark-hover:#e5e5e5;--action-dark-active:#d4d4d4;
66
+ /* Press (active) fills — one step past the hover value in each family */
67
+ --bg-press:#3a3a3a;--soft-active:rgba(43,127,255,.32);--danger-active:#c10007;--danger-soft-active:rgba(251,44,54,.26);
68
+ --focus-ring:rgba(43,127,255,.32);--focus-border:#2b7fff;--selected-border:#51a2ff;
69
+ --soft-bg:rgba(43,127,255,.14);--soft-border:#2b7fff;--soft-hover:rgba(43,127,255,.24);
70
+ --info-bg:rgba(43,127,255,.14);--info-fg:#8ab8ff;
71
+ --link:#7cb0ff;--link-hover:#a8caff;
72
+ /* Structure */
73
+ --track:#303030;--dot-neutral:#737373;--skeleton:#242424;--checkbox-border:#4a4a4a;
74
+ --port-border:#3f3f3f;--dropzone-border:#3a3a3a;--dropzone-border-hover:#525252;
75
+ --edge:#4b5563;--chart-blue:#4d93ff;--purple-500:#c07cff;
76
+ --tooltip-bg:#f5f5f5;--tooltip-fg:#0a0a0a;
77
+ /* Category hues — glyph lifted for contrast, tile tint becomes a low-alpha wash */
78
+ --cat-source:#22c58f;--cat-source-bg:rgba(0,188,125,.16);
79
+ --cat-join:#5b9bff;--cat-join-bg:rgba(43,127,255,.16);
80
+ --cat-transform:#ff8b3d;--cat-transform-bg:rgba(255,105,0,.16);
81
+ --cat-merge:#c07cff;--cat-merge-bg:rgba(152,16,250,.18);
82
+ --cat-output:#22bfb2;--cat-output-bg:rgba(0,150,137,.18);
83
+ /* Status — solid dots keep the brand hue; tints/text lift for legibility */
84
+ --success:#00bc7d;--success-strong:#22c58f;--success-bg:rgba(0,188,125,.14);--success-text:#4ade9f;
85
+ --danger:#fb2c36;--danger-bg:rgba(251,44,54,.14);--danger-text:#ff8085;
86
+ --warning:#ffb900;--warning-bg:rgba(255,185,0,.14);--warning-text:#ffc55c;
87
+ /* Elevation reads as a deeper shadow plus a lighter surface, never a glow */
88
+ --shadow-node:0 1px 3px 0 rgba(0,0,0,.6),0 1px 2px -1px rgba(0,0,0,.5);
89
+ --shadow-selected:0 0 0 2px rgba(43,127,255,.32),0 1px 3px 0 rgba(0,0,0,.6);
90
+ --shadow-menu:0 4px 16px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.4);
91
+ --shadow-modal:0 24px 64px rgba(0,0,0,.7),0 2px 8px rgba(0,0,0,.5);
92
+
93
+ }
94
+ body{background:var(--bg-app);color:var(--text-primary)}
95
+ img[src$="keybricks-logo.png"]{filter:none}
96
+ }
package/tokens/fonts.css ADDED
@@ -0,0 +1,4 @@
1
+ /* Webfonts. Inter loaded from Google Fonts (weights 300–700 incl. italic 400).
2
+ Menlo is a macOS system font — no webfont exists; --font-mono falls back
3
+ through ui-monospace/SF Mono/Consolas. */
4
+ @import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');
package/tokens/interaction.css ADDED
@@ -0,0 +1,48 @@
1
+ /* ── Universal interaction layer ──
2
+ Rest, hover and selected states live in each component's own styles.
3
+ Press and keyboard focus are delivered here so EVERY control carries them
4
+ uniformly: `filter` and `outline` are never set inline, so these rules
5
+ compose on top of whatever background a component is showing at the time.
6
+
7
+ Press = one step darker than whatever is currently painted (in dark mode the
8
+ step goes lighter, matching the surface ramp). Because a pointer press always
9
+ follows hover, the filter multiplies the hover wash — so a ghost row reads as
10
+ "hover + one more step" rather than needing its own press color.
11
+
12
+ Components that own an explicit press color (Button, IconButton) carry
13
+ data-press="own" and opt out of the filter.
14
+ Reduced-motion users still get both states — neither is animated. */
15
+ :root{--press-filter:brightness(.94);/* @kind other */--press-filter-strong:brightness(.88)/* @kind other */}
16
+ [data-theme="dark"]{--press-filter:brightness(1.35);/* @kind other */--press-filter-strong:brightness(1.6)/* @kind other */}
17
+ @media (prefers-color-scheme: dark){:root{--press-filter:brightness(1.35);/* @kind other */--press-filter-strong:brightness(1.6)/* @kind other */}}
18
+
19
+ button:not(:disabled):not([data-press="own"]):active,
20
+ a:active,
21
+ label:active,
22
+ summary:active,
23
+ [role="button"]:not([aria-disabled="true"]):active,
24
+ [role="menuitem"]:active,
25
+ [role="menuitemcheckbox"]:active,
26
+ [role="option"]:active,
27
+ [role="tab"]:active,
28
+ [role="switch"]:active,
29
+ [role="checkbox"]:active,
30
+ [role="radio"]:active,
31
+ [role="treeitem"]:active,
32
+ [role="gridcell"]:active{filter:var(--press-filter)}
33
+
34
+ /* Keyboard focus — visible on :focus-visible only, so a mouse click never draws it.
35
+ `outline` is used (not box-shadow) so component shadows stay intact. */
36
+ button:focus-visible,
37
+ a:focus-visible,
38
+ input:focus-visible,
39
+ textarea:focus-visible,
40
+ select:focus-visible,
41
+ summary:focus-visible,
42
+ [tabindex]:focus-visible,
43
+ [role="button"]:focus-visible,
44
+ [role="menuitem"]:focus-visible,
45
+ [role="option"]:focus-visible,
46
+ [role="tab"]:focus-visible,
47
+ [role="switch"]:focus-visible,
48
+ [role="treeitem"]:focus-visible{outline:2px solid var(--focus-border);outline-offset:2px}
package/tokens/layout.css ADDED
@@ -0,0 +1,30 @@
1
+ /* Keybricks spacing / radii / borders / shadows / chrome sizes */
2
+ :root{
3
+ /* Radii */
4
+ --radius-sm:4px; /* steppers, dropdown selects, small toggles, checkbox */
5
+ --radius-md:8px; /* buttons, inputs, nav items, chips, 32px icon tiles */
6
+ --radius-lg:10px; /* cards, dropzone, large buttons, search fields */
7
+ --radius-tile:14px;/* 40px palette icon tiles */
8
+ --radius-node:16px;/* canvas node cards + their 48px icon tiles */
9
+ --radius-full:9999px;
10
+ /* Shadows */
11
+ --shadow-node:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);
12
+ --shadow-selected:0 0 0 2px var(--focus-ring),0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);
13
+ --shadow-menu:0 4px 12px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.08);
14
+ --shadow-modal:0 24px 64px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.08);
15
+ --ring-surface:0 0 0 2px var(--bg-surface);
16
+ --ring-focus:0 0 0 2px var(--bg-surface),0 0 0 4px var(--focus-border);
17
+ /* Chrome sizes */
18
+ --sidebar-w:240px;--rail-w:64px;--topbar-h:56px;--panel-w:400px;--drawer-h:250px;
19
+ /* Control heights */
20
+ --h-button:32px;--h-button-sm:30px;--h-input:36px;--h-nav-item:35.5px;--h-subnav-item:31.5px;--h-tree-item:30px;
21
+ /* Page rhythm */
22
+ --page-pad-y:24px;--page-pad-x:32px;--section-gap:24px;--card-pad:21px;--card-pad-sm:17px;
23
+ /* Stacking */
24
+ --z-sticky:10; /* @kind other */
25
+ --z-drawer:20; /* @kind other */
26
+ --z-menu:40; /* @kind other */
27
+ --z-modal:60; /* @kind other */
28
+ --z-toast:80; /* @kind other */
29
+ --z-tooltip:100; /* @kind other */
30
+ }
package/tokens/motion.css ADDED
@@ -0,0 +1,22 @@
1
+ /* Motion — not specified in the source file; this is a restrained scale chosen to
2
+ match the product's flat, dense character. Nothing bounces, nothing slides far. */
3
+ :root{
4
+ --dur-instant:80ms; /* @kind other */
5
+ --dur-fast:120ms; /* @kind other */
6
+ --dur:160ms; /* @kind other */
7
+ --dur-slow:240ms; /* @kind other */
8
+ --dur-slower:360ms; /* @kind other */
9
+ --ease-out:cubic-bezier(.2,.8,.3,1); /* @kind other */
10
+ --ease-in-out:cubic-bezier(.4,0,.2,1); /* @kind other */
11
+ --ease-in:cubic-bezier(.4,0,1,1); /* @kind other */
12
+ /* Standard recipes */
13
+ --t-hover:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out); /* @kind other */
14
+ --t-theme:background-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out); /* @kind other */
15
+ }
16
+ @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
17
+ @keyframes kb-fade-in{from{opacity:0}to{opacity:1}}
18
+ @keyframes kb-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
19
+ @keyframes kb-toast-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
20
+ @keyframes kb-pulse{0%,100%{opacity:1}50%{opacity:.45}}
21
+ @keyframes kb-spin{to{transform:rotate(360deg)}}
22
+ @keyframes kb-slide-in{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}