@qi-tian-da-sheng/bin-project-ui 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 (614) hide show
  1. package/README.md +269 -0
  2. package/es/bin-ui.css +1 -0
  3. package/es/index.mjs +125 -0
  4. package/es/packages/components/abstract/index.mjs +6 -0
  5. package/es/packages/components/abstract/src/partial.vue.mjs +42 -0
  6. package/es/packages/components/abstract/src/partial.vue2.mjs +4 -0
  7. package/es/packages/components/badge/index.mjs +6 -0
  8. package/es/packages/components/badge/src/badge.mjs +69 -0
  9. package/es/packages/components/badge/src/badge.vue.mjs +44 -0
  10. package/es/packages/components/badge/src/badge.vue2.mjs +4 -0
  11. package/es/packages/components/button/index.mjs +6 -0
  12. package/es/packages/components/button/src/button.mjs +95 -0
  13. package/es/packages/components/button/src/button.vue.mjs +56 -0
  14. package/es/packages/components/button/src/button.vue2.mjs +4 -0
  15. package/es/packages/components/dialog/index.mjs +6 -0
  16. package/es/packages/components/dialog/src/dialog.mjs +99 -0
  17. package/es/packages/components/dialog/src/dialog.vue.mjs +140 -0
  18. package/es/packages/components/dialog/src/dialog.vue2.mjs +4 -0
  19. package/es/packages/components/divider/index.mjs +6 -0
  20. package/es/packages/components/divider/src/divider.mjs +44 -0
  21. package/es/packages/components/divider/src/divider.vue.mjs +48 -0
  22. package/es/packages/components/divider/src/divider.vue2.mjs +4 -0
  23. package/es/packages/components/drawer/index.mjs +6 -0
  24. package/es/packages/components/drawer/src/drawer.mjs +109 -0
  25. package/es/packages/components/drawer/src/drawer.vue.mjs +148 -0
  26. package/es/packages/components/drawer/src/drawer.vue2.mjs +4 -0
  27. package/es/packages/components/dropdown/index.mjs +8 -0
  28. package/es/packages/components/dropdown/src/dropdown-item.mjs +57 -0
  29. package/es/packages/components/dropdown/src/dropdown-item.vue.mjs +51 -0
  30. package/es/packages/components/dropdown/src/dropdown-item.vue2.mjs +4 -0
  31. package/es/packages/components/dropdown/src/dropdown.mjs +108 -0
  32. package/es/packages/components/dropdown/src/dropdown.vue.mjs +92 -0
  33. package/es/packages/components/dropdown/src/dropdown.vue2.mjs +4 -0
  34. package/es/packages/components/floating/index.mjs +6 -0
  35. package/es/packages/components/floating/src/creat-floating-container.mjs +6 -0
  36. package/es/packages/components/floating/src/floating-props.mjs +101 -0
  37. package/es/packages/components/floating/src/floating.vue.mjs +127 -0
  38. package/es/packages/components/floating/src/floating.vue2.mjs +4 -0
  39. package/es/packages/components/grid/index.mjs +8 -0
  40. package/es/packages/components/grid/src/col.mjs +34 -0
  41. package/es/packages/components/grid/src/col.vue.mjs +28 -0
  42. package/es/packages/components/grid/src/col.vue2.mjs +4 -0
  43. package/es/packages/components/grid/src/row.mjs +35 -0
  44. package/es/packages/components/grid/src/row.vue.mjs +30 -0
  45. package/es/packages/components/grid/src/row.vue2.mjs +4 -0
  46. package/es/packages/components/icon/index.mjs +6 -0
  47. package/es/packages/components/icon/src/icon.mjs +31 -0
  48. package/es/packages/components/icon/src/icon.vue.mjs +31 -0
  49. package/es/packages/components/icon/src/icon.vue2.mjs +4 -0
  50. package/es/packages/components/input/index.mjs +6 -0
  51. package/es/packages/components/input/src/input.mjs +75 -0
  52. package/es/packages/components/input/src/input.vue.mjs +161 -0
  53. package/es/packages/components/input/src/input.vue2.mjs +4 -0
  54. package/es/packages/components/installer.mjs +69 -0
  55. package/es/packages/components/layout/index.mjs +14 -0
  56. package/es/packages/components/layout/src/aside.mjs +12 -0
  57. package/es/packages/components/layout/src/aside.vue.mjs +28 -0
  58. package/es/packages/components/layout/src/aside.vue2.mjs +4 -0
  59. package/es/packages/components/layout/src/content.vue.mjs +19 -0
  60. package/es/packages/components/layout/src/content.vue2.mjs +4 -0
  61. package/es/packages/components/layout/src/footer.mjs +12 -0
  62. package/es/packages/components/layout/src/footer.vue.mjs +24 -0
  63. package/es/packages/components/layout/src/footer.vue2.mjs +4 -0
  64. package/es/packages/components/layout/src/header.mjs +12 -0
  65. package/es/packages/components/layout/src/header.vue.mjs +24 -0
  66. package/es/packages/components/layout/src/header.vue2.mjs +4 -0
  67. package/es/packages/components/layout/src/layout.vue.mjs +24 -0
  68. package/es/packages/components/layout/src/layout.vue2.mjs +4 -0
  69. package/es/packages/components/link/index.mjs +6 -0
  70. package/es/packages/components/link/src/link.mjs +50 -0
  71. package/es/packages/components/link/src/link.vue.mjs +48 -0
  72. package/es/packages/components/link/src/link.vue2.mjs +4 -0
  73. package/es/packages/components/menu/index.mjs +12 -0
  74. package/es/packages/components/menu/src/head-menu-props.mjs +63 -0
  75. package/es/packages/components/menu/src/head-menu.vue.mjs +123 -0
  76. package/es/packages/components/menu/src/head-menu.vue2.mjs +4 -0
  77. package/es/packages/components/menu/src/menu-item-props.mjs +74 -0
  78. package/es/packages/components/menu/src/menu-item.vue.mjs +66 -0
  79. package/es/packages/components/menu/src/menu-item.vue2.mjs +4 -0
  80. package/es/packages/components/menu/src/menu-props.mjs +78 -0
  81. package/es/packages/components/menu/src/menu.vue.mjs +88 -0
  82. package/es/packages/components/menu/src/menu.vue2.mjs +4 -0
  83. package/es/packages/components/menu/src/submenu-props.mjs +45 -0
  84. package/es/packages/components/menu/src/submenu.vue.mjs +190 -0
  85. package/es/packages/components/menu/src/submenu.vue2.mjs +4 -0
  86. package/es/packages/components/menu/src/v-menu.mjs +78 -0
  87. package/es/packages/components/message/index.mjs +7 -0
  88. package/es/packages/components/message/src/confirm.mjs +47 -0
  89. package/es/packages/components/message/src/message-box.mjs +93 -0
  90. package/es/packages/components/message/src/message-box.vue.mjs +195 -0
  91. package/es/packages/components/message/src/message-box.vue2.mjs +4 -0
  92. package/es/packages/components/message/src/message.mjs +31 -0
  93. package/es/packages/components/message/src/notify.mjs +38 -0
  94. package/es/packages/components/popconfirm/index.mjs +6 -0
  95. package/es/packages/components/popconfirm/src/popconfirm.mjs +115 -0
  96. package/es/packages/components/popconfirm/src/popconfirm.vue.mjs +83 -0
  97. package/es/packages/components/popconfirm/src/popconfirm.vue2.mjs +4 -0
  98. package/es/packages/components/scrollbar/index.mjs +6 -0
  99. package/es/packages/components/scrollbar/src/scrollbar.mjs +28 -0
  100. package/es/packages/components/scrollbar/src/scrollbar.vue.mjs +138 -0
  101. package/es/packages/components/scrollbar/src/scrollbar.vue2.mjs +4 -0
  102. package/es/packages/components/switch/index.mjs +6 -0
  103. package/es/packages/components/switch/src/switch-txt.vue.mjs +48 -0
  104. package/es/packages/components/switch/src/switch-txt.vue2.mjs +4 -0
  105. package/es/packages/components/switch/src/switch.mjs +137 -0
  106. package/es/packages/components/switch/src/switch.vue.mjs +103 -0
  107. package/es/packages/components/switch/src/switch.vue2.mjs +4 -0
  108. package/es/packages/components/tabs/index.mjs +8 -0
  109. package/es/packages/components/tabs/src/tab-nav-bar.vue.mjs +63 -0
  110. package/es/packages/components/tabs/src/tab-nav-bar.vue2.mjs +4 -0
  111. package/es/packages/components/tabs/src/tab-nav-item.vue.mjs +74 -0
  112. package/es/packages/components/tabs/src/tab-nav-item.vue2.mjs +4 -0
  113. package/es/packages/components/tabs/src/tab-nav.vue.mjs +223 -0
  114. package/es/packages/components/tabs/src/tab-nav.vue2.mjs +4 -0
  115. package/es/packages/components/tabs/src/tab-panel-props.mjs +59 -0
  116. package/es/packages/components/tabs/src/tab-panel.vue.mjs +36 -0
  117. package/es/packages/components/tabs/src/tab-panel.vue2.mjs +4 -0
  118. package/es/packages/components/tabs/src/tabs-props.mjs +96 -0
  119. package/es/packages/components/tabs/src/tabs.vue.mjs +97 -0
  120. package/es/packages/components/tabs/src/tabs.vue2.mjs +4 -0
  121. package/es/packages/components/tag/index.mjs +6 -0
  122. package/es/packages/components/tag/src/tag.mjs +58 -0
  123. package/es/packages/components/tag/src/tag.vue.mjs +53 -0
  124. package/es/packages/components/tag/src/tag.vue2.mjs +4 -0
  125. package/es/packages/components/tooltip/index.mjs +6 -0
  126. package/es/packages/components/tooltip/src/tooltip.mjs +96 -0
  127. package/es/packages/components/tooltip/src/tooltip.vue.mjs +65 -0
  128. package/es/packages/components/tooltip/src/tooltip.vue2.mjs +4 -0
  129. package/es/packages/hooks/useAlert.mjs +53 -0
  130. package/es/packages/hooks/useAttrs.mjs +35 -0
  131. package/es/packages/hooks/useBadge.mjs +46 -0
  132. package/es/packages/hooks/useCollapseAnimation.mjs +25 -0
  133. package/es/packages/hooks/useDefaultValue.mjs +19 -0
  134. package/es/packages/hooks/useDragSort.mjs +54 -0
  135. package/es/packages/hooks/useDraggable.mjs +40 -0
  136. package/es/packages/hooks/useFlag.mjs +19 -0
  137. package/es/packages/hooks/useLockScroll.mjs +21 -0
  138. package/es/packages/hooks/useMark.mjs +25 -0
  139. package/es/packages/hooks/useNS.mjs +34 -0
  140. package/es/packages/hooks/useVModel.mjs +24 -0
  141. package/es/packages/tools/decorator/debounce.mjs +25 -0
  142. package/es/packages/tools/decorator/single-ton.mjs +11 -0
  143. package/es/packages/tools/decorator/throttle.mjs +19 -0
  144. package/es/packages/tools/element/alert.mjs +70 -0
  145. package/es/packages/tools/element/badge.mjs +64 -0
  146. package/es/packages/tools/element/mark.mjs +39 -0
  147. package/es/packages/tools/element/render-node.mjs +52 -0
  148. package/es/packages/tools/extra/css.mjs +11 -0
  149. package/es/packages/tools/extra/delay.mjs +10 -0
  150. package/es/packages/tools/extra/fn-union.mjs +9 -0
  151. package/es/packages/tools/extra/types.mjs +47 -0
  152. package/es/packages/tools/managers/index-manager.mjs +17 -0
  153. package/es/packages/tools/managers/layout-manager.mjs +78 -0
  154. package/es/packages/tools/vn/with-install.mjs +10 -0
  155. package/examples/App.vue +312 -0
  156. package/examples/basic/button/ButtonIndex.vue +68 -0
  157. package/examples/basic/button/basic.vue +101 -0
  158. package/examples/basic/button/icon.vue +32 -0
  159. package/examples/basic/button/loading.vue +65 -0
  160. package/examples/basic/icon/IconIndex.vue +40 -0
  161. package/examples/basic/icon/basic.vue +34 -0
  162. package/examples/basic/icon/list.vue +104 -0
  163. package/examples/components/ApiTable.vue +135 -0
  164. package/examples/components/DemoBlock.vue +146 -0
  165. package/examples/components/page-styles.less +22 -0
  166. package/examples/data/badge/BadgeIndex.vue +70 -0
  167. package/examples/data/badge/basic.vue +45 -0
  168. package/examples/data/badge/max.vue +32 -0
  169. package/examples/data/badge/use.vue +32 -0
  170. package/examples/data/badge/variant.vue +79 -0
  171. package/examples/data/tag/TagIndex.vue +64 -0
  172. package/examples/data/tag/basic.vue +78 -0
  173. package/examples/data/tag/closable.vue +70 -0
  174. package/examples/data/tag/size.vue +39 -0
  175. package/examples/data/tooltip/TooltipIndex.vue +39 -0
  176. package/examples/data/tooltip/basic.vue +125 -0
  177. package/examples/data/tooltip/slot.vue +17 -0
  178. package/examples/data/tooltip/theme.vue +14 -0
  179. package/examples/dataInput/input/InputIndex.vue +105 -0
  180. package/examples/dataInput/input/basic.vue +44 -0
  181. package/examples/dataInput/input/check.vue +48 -0
  182. package/examples/dataInput/input/clearable.vue +29 -0
  183. package/examples/dataInput/input/disabled.vue +11 -0
  184. package/examples/dataInput/input/icon.vue +25 -0
  185. package/examples/dataInput/input/limit.vue +28 -0
  186. package/examples/dataInput/input/size.vue +32 -0
  187. package/examples/dataInput/input/sockets.vue +62 -0
  188. package/examples/dataInput/input/type.vue +14 -0
  189. package/examples/dataInput/switch/SwitchIndex.vue +80 -0
  190. package/examples/dataInput/switch/basic.vue +38 -0
  191. package/examples/dataInput/switch/change.vue +37 -0
  192. package/examples/dataInput/switch/disabled.vue +33 -0
  193. package/examples/dataInput/switch/icon.vue +22 -0
  194. package/examples/dataInput/switch/size.vue +28 -0
  195. package/examples/dataInput/switch/text.vue +23 -0
  196. package/examples/dataInput/switch/type.vue +20 -0
  197. package/examples/feedback/confirm/ConfirmIndex.vue +29 -0
  198. package/examples/feedback/confirm/basic.vue +34 -0
  199. package/examples/feedback/confirm/btnText.vue +28 -0
  200. package/examples/feedback/confirm/closeType.vue +54 -0
  201. package/examples/feedback/confirm/draggable.vue +28 -0
  202. package/examples/feedback/confirm/offset.vue +27 -0
  203. package/examples/feedback/confirm/type.vue +68 -0
  204. package/examples/feedback/dialog/DialogIndex.vue +32 -0
  205. package/examples/feedback/dialog/basic.vue +46 -0
  206. package/examples/feedback/dialog/beforeClose.vue +45 -0
  207. package/examples/feedback/dialog/close.vue +31 -0
  208. package/examples/feedback/dialog/define.vue +43 -0
  209. package/examples/feedback/dialog/draggable.vue +31 -0
  210. package/examples/feedback/dialog/mark.vue +29 -0
  211. package/examples/feedback/dialog/part.vue +33 -0
  212. package/examples/feedback/dialog/top.vue +39 -0
  213. package/examples/feedback/drawer/DrawerIndex.vue +24 -0
  214. package/examples/feedback/drawer/basic.vue +30 -0
  215. package/examples/feedback/drawer/headFoot.vue +39 -0
  216. package/examples/feedback/drawer/part.vue +42 -0
  217. package/examples/feedback/message/MessageIndex.vue +30 -0
  218. package/examples/feedback/message/basic.vue +87 -0
  219. package/examples/feedback/message/close.vue +27 -0
  220. package/examples/feedback/message/icon.vue +27 -0
  221. package/examples/feedback/message/offset.vue +26 -0
  222. package/examples/feedback/message/time.vue +43 -0
  223. package/examples/feedback/message/type.vue +67 -0
  224. package/examples/feedback/notify/NotifyIndex.vue +23 -0
  225. package/examples/feedback/notify/basic.vue +46 -0
  226. package/examples/feedback/notify/position.vue +46 -0
  227. package/examples/feedback/notify/type.vue +36 -0
  228. package/examples/feedback/popconfirm/PopconfirmIndex.vue +20 -0
  229. package/examples/feedback/popconfirm/basic.vue +36 -0
  230. package/examples/feedback/popconfirm/custom.vue +37 -0
  231. package/examples/layout/divider/DividerIndex.vue +25 -0
  232. package/examples/layout/divider/basic.vue +15 -0
  233. package/examples/layout/divider/content.vue +15 -0
  234. package/examples/layout/divider/type.vue +13 -0
  235. package/examples/layout/divider/vertical.vue +12 -0
  236. package/examples/layout/grid/GridIndex.vue +19 -0
  237. package/examples/layout/grid/basic.vue +47 -0
  238. package/examples/layout/layoutContainer/LayoutIndex.vue +24 -0
  239. package/examples/layout/layoutContainer/assembly.vue +100 -0
  240. package/examples/layout/layoutContainer/basic.vue +78 -0
  241. package/examples/layout/layoutContainer/side.vue +77 -0
  242. package/examples/main.ts +12 -0
  243. package/examples/navi/dropdown/DropdownIndex.vue +94 -0
  244. package/examples/navi/dropdown/basic.vue +40 -0
  245. package/examples/navi/dropdown/centers.vue +24 -0
  246. package/examples/navi/dropdown/other.vue +55 -0
  247. package/examples/navi/dropdown/scroll.vue +23 -0
  248. package/examples/navi/menu/HeadMenu.vue +158 -0
  249. package/examples/navi/menu/MenuIndex.vue +16 -0
  250. package/examples/navi/menu/SideMenu.vue +13 -0
  251. package/examples/navi/tabs/TabsIndex.vue +63 -0
  252. package/examples/navi/tabs/basic.vue +81 -0
  253. package/examples/navi/tabs/editor.vue +130 -0
  254. package/examples/navi/tabs/position.vue +46 -0
  255. package/examples/style.css +48 -0
  256. package/index.html +13 -0
  257. package/index.ts +27 -0
  258. package/lib/bin-ui.css +1 -0
  259. package/lib/index.js +1 -0
  260. package/lib/packages/components/abstract/index.js +1 -0
  261. package/lib/packages/components/abstract/src/partial.vue.js +1 -0
  262. package/lib/packages/components/abstract/src/partial.vue2.js +1 -0
  263. package/lib/packages/components/badge/index.js +1 -0
  264. package/lib/packages/components/badge/src/badge.js +1 -0
  265. package/lib/packages/components/badge/src/badge.vue.js +1 -0
  266. package/lib/packages/components/badge/src/badge.vue2.js +1 -0
  267. package/lib/packages/components/button/index.js +1 -0
  268. package/lib/packages/components/button/src/button.js +1 -0
  269. package/lib/packages/components/button/src/button.vue.js +1 -0
  270. package/lib/packages/components/button/src/button.vue2.js +1 -0
  271. package/lib/packages/components/dialog/index.js +1 -0
  272. package/lib/packages/components/dialog/src/dialog.js +1 -0
  273. package/lib/packages/components/dialog/src/dialog.vue.js +1 -0
  274. package/lib/packages/components/dialog/src/dialog.vue2.js +1 -0
  275. package/lib/packages/components/divider/index.js +1 -0
  276. package/lib/packages/components/divider/src/divider.js +1 -0
  277. package/lib/packages/components/divider/src/divider.vue.js +1 -0
  278. package/lib/packages/components/divider/src/divider.vue2.js +1 -0
  279. package/lib/packages/components/drawer/index.js +1 -0
  280. package/lib/packages/components/drawer/src/drawer.js +1 -0
  281. package/lib/packages/components/drawer/src/drawer.vue.js +1 -0
  282. package/lib/packages/components/drawer/src/drawer.vue2.js +1 -0
  283. package/lib/packages/components/dropdown/index.js +1 -0
  284. package/lib/packages/components/dropdown/src/dropdown-item.js +1 -0
  285. package/lib/packages/components/dropdown/src/dropdown-item.vue.js +1 -0
  286. package/lib/packages/components/dropdown/src/dropdown-item.vue2.js +1 -0
  287. package/lib/packages/components/dropdown/src/dropdown.js +1 -0
  288. package/lib/packages/components/dropdown/src/dropdown.vue.js +1 -0
  289. package/lib/packages/components/dropdown/src/dropdown.vue2.js +1 -0
  290. package/lib/packages/components/floating/index.js +1 -0
  291. package/lib/packages/components/floating/src/creat-floating-container.js +1 -0
  292. package/lib/packages/components/floating/src/floating-props.js +1 -0
  293. package/lib/packages/components/floating/src/floating.vue.js +1 -0
  294. package/lib/packages/components/floating/src/floating.vue2.js +1 -0
  295. package/lib/packages/components/grid/index.js +1 -0
  296. package/lib/packages/components/grid/src/col.js +1 -0
  297. package/lib/packages/components/grid/src/col.vue.js +1 -0
  298. package/lib/packages/components/grid/src/col.vue2.js +1 -0
  299. package/lib/packages/components/grid/src/row.js +1 -0
  300. package/lib/packages/components/grid/src/row.vue.js +1 -0
  301. package/lib/packages/components/grid/src/row.vue2.js +1 -0
  302. package/lib/packages/components/icon/index.js +1 -0
  303. package/lib/packages/components/icon/src/icon.js +1 -0
  304. package/lib/packages/components/icon/src/icon.vue.js +1 -0
  305. package/lib/packages/components/icon/src/icon.vue2.js +1 -0
  306. package/lib/packages/components/input/index.js +1 -0
  307. package/lib/packages/components/input/src/input.js +1 -0
  308. package/lib/packages/components/input/src/input.vue.js +1 -0
  309. package/lib/packages/components/input/src/input.vue2.js +1 -0
  310. package/lib/packages/components/installer.js +1 -0
  311. package/lib/packages/components/layout/index.js +1 -0
  312. package/lib/packages/components/layout/src/aside.js +1 -0
  313. package/lib/packages/components/layout/src/aside.vue.js +1 -0
  314. package/lib/packages/components/layout/src/aside.vue2.js +1 -0
  315. package/lib/packages/components/layout/src/content.vue.js +1 -0
  316. package/lib/packages/components/layout/src/content.vue2.js +1 -0
  317. package/lib/packages/components/layout/src/footer.js +1 -0
  318. package/lib/packages/components/layout/src/footer.vue.js +1 -0
  319. package/lib/packages/components/layout/src/footer.vue2.js +1 -0
  320. package/lib/packages/components/layout/src/header.js +1 -0
  321. package/lib/packages/components/layout/src/header.vue.js +1 -0
  322. package/lib/packages/components/layout/src/header.vue2.js +1 -0
  323. package/lib/packages/components/layout/src/layout.vue.js +1 -0
  324. package/lib/packages/components/layout/src/layout.vue2.js +1 -0
  325. package/lib/packages/components/link/index.js +1 -0
  326. package/lib/packages/components/link/src/link.js +1 -0
  327. package/lib/packages/components/link/src/link.vue.js +1 -0
  328. package/lib/packages/components/link/src/link.vue2.js +1 -0
  329. package/lib/packages/components/menu/index.js +1 -0
  330. package/lib/packages/components/menu/src/head-menu-props.js +1 -0
  331. package/lib/packages/components/menu/src/head-menu.vue.js +1 -0
  332. package/lib/packages/components/menu/src/head-menu.vue2.js +1 -0
  333. package/lib/packages/components/menu/src/menu-item-props.js +1 -0
  334. package/lib/packages/components/menu/src/menu-item.vue.js +1 -0
  335. package/lib/packages/components/menu/src/menu-item.vue2.js +1 -0
  336. package/lib/packages/components/menu/src/menu-props.js +1 -0
  337. package/lib/packages/components/menu/src/menu.vue.js +1 -0
  338. package/lib/packages/components/menu/src/menu.vue2.js +1 -0
  339. package/lib/packages/components/menu/src/submenu-props.js +1 -0
  340. package/lib/packages/components/menu/src/submenu.vue.js +1 -0
  341. package/lib/packages/components/menu/src/submenu.vue2.js +1 -0
  342. package/lib/packages/components/menu/src/v-menu.js +1 -0
  343. package/lib/packages/components/message/index.js +1 -0
  344. package/lib/packages/components/message/src/confirm.js +1 -0
  345. package/lib/packages/components/message/src/message-box.js +1 -0
  346. package/lib/packages/components/message/src/message-box.vue.js +1 -0
  347. package/lib/packages/components/message/src/message-box.vue2.js +1 -0
  348. package/lib/packages/components/message/src/message.js +1 -0
  349. package/lib/packages/components/message/src/notify.js +1 -0
  350. package/lib/packages/components/popconfirm/index.js +1 -0
  351. package/lib/packages/components/popconfirm/src/popconfirm.js +1 -0
  352. package/lib/packages/components/popconfirm/src/popconfirm.vue.js +1 -0
  353. package/lib/packages/components/popconfirm/src/popconfirm.vue2.js +1 -0
  354. package/lib/packages/components/scrollbar/index.js +1 -0
  355. package/lib/packages/components/scrollbar/src/scrollbar.js +1 -0
  356. package/lib/packages/components/scrollbar/src/scrollbar.vue.js +1 -0
  357. package/lib/packages/components/scrollbar/src/scrollbar.vue2.js +1 -0
  358. package/lib/packages/components/switch/index.js +1 -0
  359. package/lib/packages/components/switch/src/switch-txt.vue.js +1 -0
  360. package/lib/packages/components/switch/src/switch-txt.vue2.js +1 -0
  361. package/lib/packages/components/switch/src/switch.js +1 -0
  362. package/lib/packages/components/switch/src/switch.vue.js +1 -0
  363. package/lib/packages/components/switch/src/switch.vue2.js +1 -0
  364. package/lib/packages/components/tabs/index.js +1 -0
  365. package/lib/packages/components/tabs/src/tab-nav-bar.vue.js +1 -0
  366. package/lib/packages/components/tabs/src/tab-nav-bar.vue2.js +1 -0
  367. package/lib/packages/components/tabs/src/tab-nav-item.vue.js +1 -0
  368. package/lib/packages/components/tabs/src/tab-nav-item.vue2.js +1 -0
  369. package/lib/packages/components/tabs/src/tab-nav.vue.js +1 -0
  370. package/lib/packages/components/tabs/src/tab-nav.vue2.js +1 -0
  371. package/lib/packages/components/tabs/src/tab-panel-props.js +1 -0
  372. package/lib/packages/components/tabs/src/tab-panel.vue.js +1 -0
  373. package/lib/packages/components/tabs/src/tab-panel.vue2.js +1 -0
  374. package/lib/packages/components/tabs/src/tabs-props.js +1 -0
  375. package/lib/packages/components/tabs/src/tabs.vue.js +1 -0
  376. package/lib/packages/components/tabs/src/tabs.vue2.js +1 -0
  377. package/lib/packages/components/tag/index.js +1 -0
  378. package/lib/packages/components/tag/src/tag.js +1 -0
  379. package/lib/packages/components/tag/src/tag.vue.js +1 -0
  380. package/lib/packages/components/tag/src/tag.vue2.js +1 -0
  381. package/lib/packages/components/tooltip/index.js +1 -0
  382. package/lib/packages/components/tooltip/src/tooltip.js +1 -0
  383. package/lib/packages/components/tooltip/src/tooltip.vue.js +1 -0
  384. package/lib/packages/components/tooltip/src/tooltip.vue2.js +1 -0
  385. package/lib/packages/hooks/useAlert.js +1 -0
  386. package/lib/packages/hooks/useAttrs.js +1 -0
  387. package/lib/packages/hooks/useBadge.js +1 -0
  388. package/lib/packages/hooks/useCollapseAnimation.js +1 -0
  389. package/lib/packages/hooks/useDefaultValue.js +1 -0
  390. package/lib/packages/hooks/useDragSort.js +1 -0
  391. package/lib/packages/hooks/useDraggable.js +1 -0
  392. package/lib/packages/hooks/useFlag.js +1 -0
  393. package/lib/packages/hooks/useLockScroll.js +1 -0
  394. package/lib/packages/hooks/useMark.js +1 -0
  395. package/lib/packages/hooks/useNS.js +1 -0
  396. package/lib/packages/hooks/useVModel.js +1 -0
  397. package/lib/packages/tools/decorator/debounce.js +1 -0
  398. package/lib/packages/tools/decorator/single-ton.js +1 -0
  399. package/lib/packages/tools/decorator/throttle.js +1 -0
  400. package/lib/packages/tools/element/alert.js +1 -0
  401. package/lib/packages/tools/element/badge.js +1 -0
  402. package/lib/packages/tools/element/mark.js +1 -0
  403. package/lib/packages/tools/element/render-node.js +1 -0
  404. package/lib/packages/tools/extra/css.js +1 -0
  405. package/lib/packages/tools/extra/delay.js +1 -0
  406. package/lib/packages/tools/extra/fn-union.js +1 -0
  407. package/lib/packages/tools/extra/types.js +1 -0
  408. package/lib/packages/tools/managers/index-manager.js +1 -0
  409. package/lib/packages/tools/managers/layout-manager.js +1 -0
  410. package/lib/packages/tools/vn/with-install.js +1 -0
  411. package/package.json +82 -0
  412. package/packages/components/__tests__/utils.ts +54 -0
  413. package/packages/components/abstract/index.ts +13 -0
  414. package/packages/components/abstract/src/partial.vue +79 -0
  415. package/packages/components/badge/__tests__/badge.spec.ts +152 -0
  416. package/packages/components/badge/index.ts +13 -0
  417. package/packages/components/badge/src/badge.ts +95 -0
  418. package/packages/components/badge/src/badge.vue +78 -0
  419. package/packages/components/button/__tests__/button.spec.ts +195 -0
  420. package/packages/components/button/index.ts +13 -0
  421. package/packages/components/button/src/button.ts +167 -0
  422. package/packages/components/button/src/button.vue +101 -0
  423. package/packages/components/dialog/index.ts +13 -0
  424. package/packages/components/dialog/src/dialog.ts +182 -0
  425. package/packages/components/dialog/src/dialog.vue +193 -0
  426. package/packages/components/divider/index.ts +13 -0
  427. package/packages/components/divider/src/divider.ts +71 -0
  428. package/packages/components/divider/src/divider.vue +56 -0
  429. package/packages/components/drawer/index.ts +13 -0
  430. package/packages/components/drawer/src/drawer.ts +196 -0
  431. package/packages/components/drawer/src/drawer.vue +205 -0
  432. package/packages/components/dropdown/index.ts +16 -0
  433. package/packages/components/dropdown/src/dropdown-item.ts +95 -0
  434. package/packages/components/dropdown/src/dropdown-item.vue +65 -0
  435. package/packages/components/dropdown/src/dropdown.ts +172 -0
  436. package/packages/components/dropdown/src/dropdown.vue +109 -0
  437. package/packages/components/dropdown/src/type.ts +148 -0
  438. package/packages/components/floating/index.ts +13 -0
  439. package/packages/components/floating/src/creat-floating-container.ts +17 -0
  440. package/packages/components/floating/src/floating-props.ts +127 -0
  441. package/packages/components/floating/src/floating.vue +216 -0
  442. package/packages/components/floating/src/type.ts +91 -0
  443. package/packages/components/global.d.ts +46 -0
  444. package/packages/components/grid/index.ts +16 -0
  445. package/packages/components/grid/src/col.ts +43 -0
  446. package/packages/components/grid/src/col.vue +33 -0
  447. package/packages/components/grid/src/row.ts +54 -0
  448. package/packages/components/grid/src/row.vue +36 -0
  449. package/packages/components/icon/index.ts +13 -0
  450. package/packages/components/icon/src/icon.ts +47 -0
  451. package/packages/components/icon/src/icon.vue +42 -0
  452. package/packages/components/index.ts +32 -0
  453. package/packages/components/input/__tests__/input.spec.ts +379 -0
  454. package/packages/components/input/index.ts +13 -0
  455. package/packages/components/input/src/input.ts +151 -0
  456. package/packages/components/input/src/input.vue +300 -0
  457. package/packages/components/installer.ts +69 -0
  458. package/packages/components/layout/index.ts +26 -0
  459. package/packages/components/layout/src/aside.ts +19 -0
  460. package/packages/components/layout/src/aside.vue +35 -0
  461. package/packages/components/layout/src/content.ts +11 -0
  462. package/packages/components/layout/src/content.vue +18 -0
  463. package/packages/components/layout/src/footer.ts +19 -0
  464. package/packages/components/layout/src/footer.vue +26 -0
  465. package/packages/components/layout/src/header.ts +19 -0
  466. package/packages/components/layout/src/header.vue +26 -0
  467. package/packages/components/layout/src/layout.ts +11 -0
  468. package/packages/components/layout/src/layout.vue +34 -0
  469. package/packages/components/link/index.ts +13 -0
  470. package/packages/components/link/src/link.ts +92 -0
  471. package/packages/components/link/src/link.vue +52 -0
  472. package/packages/components/menu/index.ts +28 -0
  473. package/packages/components/menu/src/head-menu-props.ts +80 -0
  474. package/packages/components/menu/src/head-menu.vue +191 -0
  475. package/packages/components/menu/src/menu-item-props.ts +93 -0
  476. package/packages/components/menu/src/menu-item.vue +85 -0
  477. package/packages/components/menu/src/menu-props.ts +98 -0
  478. package/packages/components/menu/src/menu.vue +110 -0
  479. package/packages/components/menu/src/submenu-props.ts +58 -0
  480. package/packages/components/menu/src/submenu.vue +270 -0
  481. package/packages/components/menu/src/type.ts +346 -0
  482. package/packages/components/menu/src/v-menu.ts +142 -0
  483. package/packages/components/message/index.ts +27 -0
  484. package/packages/components/message/src/confirm.ts +136 -0
  485. package/packages/components/message/src/message-box.ts +168 -0
  486. package/packages/components/message/src/message-box.vue +204 -0
  487. package/packages/components/message/src/message.ts +111 -0
  488. package/packages/components/message/src/notify.ts +179 -0
  489. package/packages/components/package.json +6 -0
  490. package/packages/components/popconfirm/index.ts +13 -0
  491. package/packages/components/popconfirm/src/popconfirm.ts +188 -0
  492. package/packages/components/popconfirm/src/popconfirm.vue +98 -0
  493. package/packages/components/scrollbar/index.ts +13 -0
  494. package/packages/components/scrollbar/src/scrollbar.ts +54 -0
  495. package/packages/components/scrollbar/src/scrollbar.vue +277 -0
  496. package/packages/components/switch/__tests__/switch.spec.ts +259 -0
  497. package/packages/components/switch/index.ts +13 -0
  498. package/packages/components/switch/src/switch-txt.vue +61 -0
  499. package/packages/components/switch/src/switch.ts +225 -0
  500. package/packages/components/switch/src/switch.vue +152 -0
  501. package/packages/components/tabs/index.ts +16 -0
  502. package/packages/components/tabs/src/tab-nav-bar.vue +86 -0
  503. package/packages/components/tabs/src/tab-nav-item.vue +80 -0
  504. package/packages/components/tabs/src/tab-nav.vue +298 -0
  505. package/packages/components/tabs/src/tab-panel-props.ts +77 -0
  506. package/packages/components/tabs/src/tab-panel.vue +52 -0
  507. package/packages/components/tabs/src/tabs-props.ts +122 -0
  508. package/packages/components/tabs/src/tabs.vue +144 -0
  509. package/packages/components/tabs/src/type.ts +194 -0
  510. package/packages/components/tag/index.ts +13 -0
  511. package/packages/components/tag/src/tag.ts +145 -0
  512. package/packages/components/tag/src/tag.vue +80 -0
  513. package/packages/components/tooltip/index.ts +13 -0
  514. package/packages/components/tooltip/src/tooltip.ts +150 -0
  515. package/packages/components/tooltip/src/tooltip.vue +70 -0
  516. package/packages/hooks/index.ts +16 -0
  517. package/packages/hooks/package.json +7 -0
  518. package/packages/hooks/useAlert.ts +93 -0
  519. package/packages/hooks/useAttrs.ts +59 -0
  520. package/packages/hooks/useBadge.ts +103 -0
  521. package/packages/hooks/useCollapseAnimation.ts +55 -0
  522. package/packages/hooks/useDefaultValue.ts +41 -0
  523. package/packages/hooks/useDragSort.ts +125 -0
  524. package/packages/hooks/useDraggable.ts +97 -0
  525. package/packages/hooks/useFlag.ts +36 -0
  526. package/packages/hooks/useLockScroll.ts +45 -0
  527. package/packages/hooks/useMark.ts +53 -0
  528. package/packages/hooks/useNS.ts +328 -0
  529. package/packages/hooks/useVModel.ts +65 -0
  530. package/packages/styles/animate.css +31 -0
  531. package/packages/styles/animation/_index.less +17 -0
  532. package/packages/styles/animation/extra.less +21 -0
  533. package/packages/styles/animation/fade/fade.less +11 -0
  534. package/packages/styles/animation/fade/fadeDown.less +37 -0
  535. package/packages/styles/animation/fade/fadeLeft.less +36 -0
  536. package/packages/styles/animation/fade/fadeRight.less +37 -0
  537. package/packages/styles/animation/fade/fadeUp.less +36 -0
  538. package/packages/styles/animation/only.less +15 -0
  539. package/packages/styles/animation/scale/scale.less +46 -0
  540. package/packages/styles/animation/scale/scaleHorizontal.less +64 -0
  541. package/packages/styles/animation/scale/scaleVertical.less +62 -0
  542. package/packages/styles/components/_index.less +30 -0
  543. package/packages/styles/components/badge/_index.less +90 -0
  544. package/packages/styles/components/button/_index.less +246 -0
  545. package/packages/styles/components/dialog/_index.less +46 -0
  546. package/packages/styles/components/divider/_index.less +89 -0
  547. package/packages/styles/components/drawer/_index.less +73 -0
  548. package/packages/styles/components/dropdown/_index.less +92 -0
  549. package/packages/styles/components/floating/_index.less +78 -0
  550. package/packages/styles/components/grid/_index.less +50 -0
  551. package/packages/styles/components/icon/_index.less +27 -0
  552. package/packages/styles/components/input/_index.less +133 -0
  553. package/packages/styles/components/layout/_index.less +70 -0
  554. package/packages/styles/components/link/_index.less +73 -0
  555. package/packages/styles/components/menu/_index.less +146 -0
  556. package/packages/styles/components/message/_index.less +236 -0
  557. package/packages/styles/components/popconfirm/_index.less +22 -0
  558. package/packages/styles/components/scrollbar/_index.less +116 -0
  559. package/packages/styles/components/switch/_index.less +228 -0
  560. package/packages/styles/components/tabs/_index.less +340 -0
  561. package/packages/styles/components/tag/_index.less +83 -0
  562. package/packages/styles/components/tooltip/_index.less +22 -0
  563. package/packages/styles/extra/_index.less +6 -0
  564. package/packages/styles/extra/alert.less +26 -0
  565. package/packages/styles/extra/mark.less +23 -0
  566. package/packages/styles/global.less +12 -0
  567. package/packages/styles/icons/iconfont.css +411 -0
  568. package/packages/styles/icons/iconfont.js +1 -0
  569. package/packages/styles/icons/iconfont.json +702 -0
  570. package/packages/styles/icons/iconfont.ttf +0 -0
  571. package/packages/styles/icons/iconfont.woff +0 -0
  572. package/packages/styles/icons/iconfont.woff2 +0 -0
  573. package/packages/styles/mixn/_index.less +12 -0
  574. package/packages/styles/mixn/background.less +65 -0
  575. package/packages/styles/mixn/border.less +31 -0
  576. package/packages/styles/mixn/layout.less +80 -0
  577. package/packages/styles/mixn/reset.less +13 -0
  578. package/packages/styles/mixn/status.less +95 -0
  579. package/packages/styles/mixn/tools.less +111 -0
  580. package/packages/styles/package.json +5 -0
  581. package/packages/styles/plugin/index.js +79 -0
  582. package/packages/styles/theme/_index.less +9 -0
  583. package/packages/styles/theme/dark.less +260 -0
  584. package/packages/styles/theme/font.less +85 -0
  585. package/packages/styles/theme/light.less +263 -0
  586. package/packages/styles/theme/radius.less +20 -0
  587. package/packages/styles/theme/size.less +89 -0
  588. package/packages/styles/variable.less +7 -0
  589. package/packages/tools/decorator/debounce.ts +53 -0
  590. package/packages/tools/decorator/single-ton.ts +17 -0
  591. package/packages/tools/decorator/throttle.ts +50 -0
  592. package/packages/tools/element/alert.ts +117 -0
  593. package/packages/tools/element/badge.ts +109 -0
  594. package/packages/tools/element/mark.ts +73 -0
  595. package/packages/tools/element/render-node.ts +225 -0
  596. package/packages/tools/extra/css.ts +40 -0
  597. package/packages/tools/extra/delay.ts +16 -0
  598. package/packages/tools/extra/fn-union.ts +17 -0
  599. package/packages/tools/extra/types.ts +88 -0
  600. package/packages/tools/index.ts +27 -0
  601. package/packages/tools/managers/index-manager.ts +25 -0
  602. package/packages/tools/managers/layout-manager.ts +102 -0
  603. package/packages/tools/package.json +7 -0
  604. package/packages/tools/vn/with-install.ts +32 -0
  605. package/packages/typings/base.ts +69 -0
  606. package/packages/typings/index.ts +7 -0
  607. package/packages/typings/package.json +7 -0
  608. package/packages/typings/sui-options.ts +8 -0
  609. package/pnpm-workspace.yaml +2 -0
  610. package/tsconfig.app.json +42 -0
  611. package/tsconfig.json +7 -0
  612. package/tsconfig.node.json +22 -0
  613. package/vite.config.ts +116 -0
  614. package/vitest.config.ts +44 -0
package/packages/styles/theme/dark.less ADDED
@@ -0,0 +1,260 @@
1
+ /*
2
+ * @description: UI 组件暗色模式主题样式
3
+ * 组件变量名称可按如下规则定义：
4
+ * --pixel-[attr]-<scene>-<type>-<status>
5
+ * pixel：公共的，
6
+ * attr: 属性名称，如 color、height、radius 等
7
+ * scene: 属性的具体应用场景。如颜色[用于背景（bg）、文本（text）、边框（border）等]
8
+ * type: 用途类型，如 button 的次要按钮（line）
9
+ * status: 表示组件状态或尺寸，如 hover、disabled、s、l 等
10
+ * @author: MC.Yang
11
+ */
12
+ :root[theme-mode="dark"] {
13
+ // 固定颜色
14
+ // 白色
15
+ --pixel-color-white: #fff;
16
+ // 黑色
17
+ --pixel-color-black: #DFDFD6;
18
+ --pixel-color-black-dark: darken(#DFDFD6, -20%);
19
+ --pixel-color-black-light: lighten(#DFDFD6, 10%);
20
+ --pixel-color-black-fade: #f4f4f4;
21
+ // 灰色
22
+ --pixel-color-gray: #DDDEE0;
23
+ --pixel-color-gray-dark: darken(#DDDEE0, 15%);
24
+ --pixel-color-gray-deep-dark: rgb(139, 139, 139);
25
+ --pixel-color-gray-fade: rgb(235, 235, 235);
26
+ --pixel-color-gray-deep-fade: rgb(240, 242, 245);
27
+ --pixel-color-gray1: #f3f3f3;
28
+ --pixel-color-gray2: #eee;
29
+ --pixel-color-gray3: #e8e8e8;
30
+ --pixel-color-gray4: #ddd;
31
+ --pixel-color-gray5: #c6c6c6;
32
+ --pixel-color-gray6: #a6a6a6;
33
+ --pixel-color-gray7: #8b8b8b;
34
+ --pixel-color-gray8: #777;
35
+ --pixel-color-gray9: #5e5e5e;
36
+ --pixel-color-gray10: #4b4b4b;
37
+ --pixel-color-gray11: #393939;
38
+ --pixel-color-gray12: #2c2c2c;
39
+ --pixel-color-gray13: #242424;
40
+ --pixel-color-gray14: #181818;
41
+
42
+ // 颜色值变动常量
43
+ @darken-1: 1%;
44
+ @darken-5: 5%;
45
+ @darken-10: 10%;
46
+ @darken-15: 15%;
47
+ @darken-30: 30%;
48
+ @darken-40: 40%;
49
+ @darken-50: 50%;
50
+
51
+ @lighten-10: 10%;
52
+ @lighten-15: 15%;
53
+ @lighten-30: 30%;
54
+
55
+ // 基础颜色
56
+ @pixel-color-brand: #4582e6;
57
+ --pixel-color-brand: darken(@pixel-color-brand, @darken-1);
58
+ // 基础颜色的扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态
59
+ --pixel-color-brand-hover: darken(@pixel-color-brand, @darken-10); // 悬停
60
+ --pixel-color-brand-focus: darken(@pixel-color-brand, @darken-5); // 焦点
61
+ --pixel-color-brand-active: darken(@pixel-color-brand, @darken-30); // 点击
62
+ --pixel-color-brand-disabled: lighten(@pixel-color-brand, @darken-50); // 禁用
63
+
64
+ --pixel-color-brand-light: darken(@pixel-color-brand, @darken-5); // 高亮
65
+ --pixel-color-brand-light-hover: darken(@pixel-color-brand, @darken-15); // 高亮悬停
66
+ --pixel-color-brand-light-focus: darken(@pixel-color-brand, @darken-10); // 高亮焦点
67
+ --pixel-color-brand-light-active: darken(@pixel-color-brand, @darken-40); // 高亮点击
68
+
69
+ --pixel-color-brand-fade: lighten(@pixel-color-brand, @lighten-30); // 浅色
70
+ --pixel-color-brand-fade-hover: lighten(@pixel-color-brand, @lighten-15); // 浅色悬停
71
+ --pixel-color-brand-fade-focus: lighten(@pixel-color-brand, @lighten-10); // 浅色焦点
72
+ --pixel-color-brand-fade-active: lighten(@pixel-color-brand, @lighten-10); // 浅色点击
73
+
74
+ // 警告颜色
75
+ @pixel-color-warning: #e8935c;
76
+ --pixel-color-warning: darken(@pixel-color-warning, @darken-1);
77
+ // 警告颜色扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态
78
+ --pixel-color-warning-hover: darken(@pixel-color-warning, @darken-10);
79
+ --pixel-color-warning-focus: darken(@pixel-color-warning, @darken-5);
80
+ --pixel-color-warning-active: darken(@pixel-color-warning, @darken-30);
81
+ --pixel-color-warning-disabled: lighten(@pixel-color-warning, @darken-50);
82
+
83
+ --pixel-color-warning-light: darken(@pixel-color-warning, @darken-5);
84
+ --pixel-color-warning-light-hover: darken(@pixel-color-warning, @darken-15);
85
+ --pixel-color-warning-light-focus: darken(@pixel-color-warning, @darken-10);
86
+ --pixel-color-warning-light-active: darken(@pixel-color-warning, @darken-40);
87
+
88
+ --pixel-color-warning-fade: lighten(@pixel-color-warning, @lighten-30);
89
+ --pixel-color-warning-fade-hover: lighten(@pixel-color-warning, @lighten-15);
90
+ --pixel-color-warning-fade-focus: lighten(@pixel-color-warning, @lighten-10);
91
+ --pixel-color-warning-fade-active: lighten(@pixel-color-warning, @lighten-10);
92
+
93
+ // 失败/错误颜色
94
+ @pixel-color-danger: #d52117;
95
+ --pixel-color-danger: darken(@pixel-color-danger, @darken-1);
96
+ // 失败/错误色扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态
97
+ --pixel-color-danger-hover: darken(@pixel-color-danger, @darken-10);
98
+ --pixel-color-danger-focus: darken(@pixel-color-danger, @darken-5);
99
+ --pixel-color-danger-active: darken(@pixel-color-danger, @darken-30);
100
+ --pixel-color-danger-disabled: lighten(@pixel-color-danger, @darken-50);
101
+
102
+ --pixel-color-danger-light: darken(@pixel-color-danger, @darken-5);
103
+ --pixel-color-danger-light-hover: darken(@pixel-color-danger, @darken-15);
104
+ --pixel-color-danger-light-focus: darken(@pixel-color-danger, @darken-10);
105
+ --pixel-color-danger-light-active: darken(@pixel-color-danger, @darken-40);
106
+
107
+ --pixel-color-danger-fade: lighten(@pixel-color-danger, @lighten-30);
108
+ --pixel-color-danger-fade-hover: lighten(@pixel-color-danger, @lighten-15);
109
+ --pixel-color-danger-fade-focus: lighten(@pixel-color-danger, @lighten-10);
110
+ --pixel-color-danger-fade-active: lighten(@pixel-color-danger, @lighten-10);
111
+
112
+ // 成功颜色
113
+ @pixel-color-success: #46bf96;
114
+ --pixel-color-success: darken(@pixel-color-success, @darken-1);
115
+ // 成功颜色扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态
116
+ --pixel-color-success-hover: darken(@pixel-color-success, @darken-10);
117
+ --pixel-color-success-focus: darken(@pixel-color-success, @darken-5);
118
+ --pixel-color-success-active: darken(@pixel-color-success, @darken-30);
119
+ --pixel-color-success-disabled: lighten(@pixel-color-success, @darken-50);
120
+
121
+ --pixel-color-success-light: darken(@pixel-color-success, @darken-5);
122
+ --pixel-color-success-light-hover: darken(@pixel-color-success, @darken-15);
123
+ --pixel-color-success-light-focus: darken(@pixel-color-success, @darken-10);
124
+ --pixel-color-success-light-active: darken(@pixel-color-success, @darken-40);
125
+
126
+ --pixel-color-success-fade: lighten(@pixel-color-success, @lighten-30);
127
+ --pixel-color-success-fade-hover: lighten(@pixel-color-success, @lighten-15);
128
+ --pixel-color-success-fade-focus: lighten(@pixel-color-success, @lighten-10);
129
+ --pixel-color-success-fade-active: lighten(@pixel-color-success, @lighten-10);
130
+
131
+ // 重要颜色
132
+ @pixel-color-primary: #dc354b;
133
+ --pixel-color-primary: darken(@pixel-color-primary, @darken-1);
134
+ // 重要颜色扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态
135
+ --pixel-color-primary-hover: darken(@pixel-color-primary, @darken-10);
136
+ --pixel-color-primary-focus: darken(@pixel-color-primary, @darken-5);
137
+ --pixel-color-primary-active: darken(@pixel-color-primary, @darken-30);
138
+ --pixel-color-primary-disabled: lighten(@pixel-color-primary, @darken-50);
139
+
140
+ --pixel-color-primary-light: darken(@pixel-color-primary, @darken-5);
141
+ --pixel-color-primary-light-hover: darken(@pixel-color-primary, @darken-15);
142
+ --pixel-color-primary-light-focus: darken(@pixel-color-primary, @darken-10);
143
+ --pixel-color-primary-light-active: darken(@pixel-color-primary, @darken-40);
144
+
145
+ --pixel-color-primary-fade: lighten(@pixel-color-primary, @lighten-30);
146
+ --pixel-color-primary-fade-hover: lighten(@pixel-color-primary, @lighten-15);
147
+ --pixel-color-primary-fade-focus: lighten(@pixel-color-primary, @lighten-10);
148
+ --pixel-color-primary-fade-active: lighten(@pixel-color-primary, @lighten-10);
149
+
150
+ // 信息颜色
151
+ @pixel-color-info: #84e8cf;
152
+ --pixel-color-info: darken(@pixel-color-info, @darken-1);
153
+ // 信息颜色扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态
154
+ --pixel-color-info-hover: darken(@pixel-color-info, @darken-10);
155
+ --pixel-color-info-focus: darken(@pixel-color-info, @darken-5);
156
+ --pixel-color-info-active: darken(@pixel-color-info, @darken-30);
157
+ --pixel-color-info-disabled: lighten(@pixel-color-info, @darken-50);
158
+
159
+ --pixel-color-info-light: darken(@pixel-color-info, @darken-5);
160
+ --pixel-color-info-light-hover: darken(@pixel-color-info, @darken-15);
161
+ --pixel-color-info-light-focus: darken(@pixel-color-info, @darken-10);
162
+ --pixel-color-info-light-active: darken(@pixel-color-info, @darken-40);
163
+
164
+ --pixel-color-info-fade: lighten(@pixel-color-info, @lighten-30);
165
+ --pixel-color-info-fade-hover: lighten(@pixel-color-info, @lighten-15);
166
+ --pixel-color-info-fade-focus: lighten(@pixel-color-info, @lighten-10);
167
+ --pixel-color-info-fade-active: lighten(@pixel-color-info, @lighten-10);
168
+
169
+ // 青颜色
170
+ @pixel-color-cyan: #c395f1;
171
+ --pixel-color-cyan: darken(@pixel-color-cyan, @darken-1);
172
+ // 青颜色色扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态
173
+ --pixel-color-cyan-hover: darken(@pixel-color-cyan, @darken-10);
174
+ --pixel-color-cyan-focus: darken(@pixel-color-cyan, @darken-5);
175
+ --pixel-color-cyan-active: darken(@pixel-color-cyan, @darken-30);
176
+ --pixel-color-cyan-disabled: lighten(@pixel-color-cyan, @darken-50);
177
+
178
+ --pixel-color-cyan-light: darken(@pixel-color-cyan, @darken-5);
179
+ --pixel-color-cyan-light-hover: darken(@pixel-color-cyan, @darken-15);
180
+ --pixel-color-cyan-light-focus: darken(@pixel-color-cyan, @darken-10);
181
+ --pixel-color-cyan-light-active: darken(@pixel-color-cyan, @darken-40);
182
+
183
+ --pixel-color-cyan-fade: lighten(@pixel-color-cyan, @lighten-30);
184
+ --pixel-color-cyan-fade-hover: lighten(@pixel-color-cyan, @lighten-15);
185
+ --pixel-color-cyan-fade-focus: lighten(@pixel-color-cyan, @lighten-10);
186
+ --pixel-color-cyan-fade-active: lighten(@pixel-color-cyan, @lighten-10);
187
+
188
+ // 文字 & 图标 颜色
189
+ --pixel-color-font-white-1: rgba(255, 255, 255, 90%);
190
+ --pixel-color-font-white-2: rgba(255, 255, 255, 55%);
191
+ --pixel-color-font-white-3: rgba(255, 255, 255, 35%);
192
+ --pixel-color-font-white-4: rgba(255, 255, 255, 22%);
193
+ --pixel-color-font-gray-1: rgba(0, 0, 0, 90%);
194
+ --pixel-color-font-gray-2: rgba(0, 0, 0, 60%);
195
+ --pixel-color-font-gray-3: rgba(0, 0, 0, 40%);
196
+ --pixel-color-font-gray-4: rgba(0, 0, 0, 26%);
197
+
198
+ // 遮罩
199
+ --pixel-color-mask-active: rgba(0, 0, 0, 40%); // 遮罩-弹出
200
+ --pixel-color-mask-disabled: rgba(0, 0, 0, 60%); // 遮罩-禁用
201
+
202
+ // 背景色
203
+ --pixel-color-bg-page: var(--pixel-color-gray14); // 色彩 - page
204
+ --pixel-color-bg-container: var(--pixel-color-gray13); // 色彩 - 容器
205
+ --pixel-color-bg-container-hover: var(--pixel-color-gray12); // 色彩 - 容器 - hover
206
+ --pixel-color-bg-container-active: var(--pixel-color-gray10); // 色彩 - 容器 - active
207
+ --pixel-color-bg-container-select: var(--pixel-color-gray9); // 色彩 - 容器 - select
208
+ --pixel-color-bg-secondarycontainer: var(--pixel-color-gray12); // 色彩 - 次级容器
209
+ --pixel-color-bg-secondarycontainer-hover: var(--pixel-color-gray11); // 色彩 - 次级容器 - hover
210
+ --pixel-color-bg-secondarycontainer-active: var(--pixel-color-gray9); // 色彩 - 次级容器 - active
211
+ --pixel-color-bg-component: var(--pixel-color-gray11); // 色彩 - 组件
212
+ --pixel-color-bg-component-hover: var(--pixel-color-gray10); // 色彩 - 组件 - hover
213
+ --pixel-color-bg-component-active: var(--pixel-color-gray9); // 色彩 - 组件 - active
214
+ --pixel-color-bg-secondarycomponent: var(--pixel-color-gray10); // 色彩 - 次级组件
215
+ --pixel-color-bg-secondarycomponent-hover: var(--pixel-color-gray9); // 色彩 - 次级组件 - hover
216
+ --pixel-color-bg-secondarycomponent-active: var(--pixel-color-gray8); // 色彩 - 次级组件 - active
217
+ --pixel-color-bg-component-disabled: var(--pixel-color-gray12); // 色彩 - 组件 - disabled
218
+
219
+ // 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
220
+ --pixel-color-bg-specialcomponent: transparent;
221
+
222
+ // 文本颜色
223
+ --pixel-color-text: #fff; // 色彩-文字-反色
224
+ --pixel-color-text-primary: var(--pixel-color-font-white-1); // 色彩-文字-主要
225
+ --pixel-color-text-secondary: var(--pixel-color-font-white-2); // 色彩-文字-次要
226
+ --pixel-color-text-placeholder: var(--pixel-color-font-white-3); // 色彩-文字-占位符/说明
227
+ --pixel-color-text-disabled: var(--pixel-color-font-white-4); // 色彩-文字-禁用
228
+ --pixel-color-text-brand: var(--pixel-color-brand); // 色彩-文字-品牌
229
+ --pixel-color-text-link: var(--pixel-color-brand); // 色彩-文字-链接
230
+
231
+ // 分割线
232
+ --pixel-color-border-level-1-color: var(--pixel-color-gray11);
233
+ --pixel-color-component-stroke: var(--pixel-color-gray11);
234
+ // 边框
235
+ --pixel-color-border-level-2-color: var(--pixel-color-gray9);
236
+ --pixel-color-component-border: var(--pixel-color-gray9);
237
+
238
+ // 基础/下层 投影 hover 使用的组件包括：表格 /
239
+ --pixel-color-shadow-1: 0 4px 6px rgba(0, 0, 0, 6%), 0 1px 10px rgba(0, 0, 0, 8%), 0 2px 4px rgba(0, 0, 0, 12%);
240
+ // 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认框 / 选择器 /
241
+ --pixel-color-shadow-2: 0 8px 10px rgba(0, 0, 0, 12%), 0 3px 14px rgba(0, 0, 0, 10%), 0 5px 5px rgba(0, 0, 0, 16%);
242
+ // 上层投影（警示/弹窗）使用的组件包括：全局提示 / 消息通知
243
+ --pixel-color-shadow-3: 0 16px 24px rgba(0, 0, 0, 14%), 0 6px 30px rgba(0, 0, 0, 12%), 0 8px 10px rgba(0, 0, 0, 20%);
244
+ // 内投影 用于弹窗类组件（气泡确认框 / 全局提示 / 消息通知）的内描边
245
+
246
+ --pixel-color-shadow-inset-top: inset 0 .5px 0 #5e5e5e;
247
+ --pixel-color-shadow-inset-right: inset .5px 0 0 #5e5e5e;
248
+ --pixel-color-shadow-inset-bottom: inset 0 -.5px 0 #5e5e5e;
249
+ --pixel-color-shadow-inset-left: inset -.5px 0 0 #5e5e5e;
250
+
251
+ // table 特定阴影
252
+ --pixel-color-table-shadow-color: rgba(0, 0, 0, 55%);
253
+
254
+ // 滚动条颜色
255
+ --pixel-color-scrollbar-color: rgba(255, 255, 255, 10%);
256
+ // 滚动条悬浮颜色（ hover ）
257
+ --pixel-color-scrollbar-hover-color: rgba(255, 255, 255, 30%);
258
+ // 滚动条轨道颜色，不能是带透明度，否则纵向滚动时，横向滚动条会穿透
259
+ --pixel-color-scroll-track-color: #333;
260
+ }
package/packages/styles/theme/font.less ADDED
@@ -0,0 +1,85 @@
1
+ /*
2
+ * @description: UI 组件字体相关样式
3
+ * 组件变量名称可按如下规则定义：
4
+ * --pixel-[attr]-<scene>-<type>-<status>
5
+ * pixel：公共的，
6
+ * attr: 属性名称，如 color、height、radius 等
7
+ * scene: 属性的具体应用场景。如颜色[用于背景（bg）、文本（text）、边框（border）等]
8
+ * type: 用途类型，如 button 的次要按钮（line）
9
+ * status: 表示组件状态或尺寸，如 hover、disabled、s、l 等
10
+ * @author: MC.Yang
11
+ */
12
+ :root {
13
+ // 字体 family
14
+ --pixel-font-family: PingFang SC, Microsoft YaHei, Arial Regular;
15
+ --pixel-font-family-medium: PingFang SC, Microsoft YaHei, Arial Medium;
16
+
17
+ // 字体大小
18
+ --pixel-font-size-link-small: 12px;
19
+ --pixel-font-size-link-medium: 14px;
20
+ --pixel-font-size-link-large: 16px;
21
+ --pixel-font-size-mark-small: 12px;
22
+ --pixel-font-size-mark-medium: 14px;
23
+ --pixel-font-size-body-small: 12px;
24
+ --pixel-font-size-body-medium: 14px;
25
+ --pixel-font-size-body-large: 16px;
26
+ --pixel-font-size-title-small: 14px;
27
+ --pixel-font-size-title-medium: 16px;
28
+ --pixel-font-size-title-large: 20px;
29
+ --pixel-font-size-headline-small: 24px;
30
+ --pixel-font-size-headline-medium: 28px;
31
+ --pixel-font-size-headline-large: 36px;
32
+ --pixel-font-size-display-medium: 48px;
33
+ --pixel-font-size-display-large: 64px;
34
+
35
+ // 字体行高 token
36
+ --pixel-line-height-link-small: 20px;
37
+ --pixel-line-height-link-medium: 22px;
38
+ --pixel-line-height-link-large: 24px;
39
+ --pixel-line-height-mark-small: 20px;
40
+ --pixel-line-height-mark-medium: 22px;
41
+ --pixel-line-height-body-small: 20px;
42
+ --pixel-line-height-body-medium: 22px;
43
+ --pixel-line-height-body-large: 24px;
44
+ --pixel-line-height-title-small: 22px;
45
+ --pixel-line-height-title-medium: 24px;
46
+ --pixel-line-height-title-large: 28px;
47
+ --pixel-line-height-headline-small: 32px;
48
+ --pixel-line-height-headline-medium: 36px;
49
+ --pixel-line-height-headline-large: 44px;
50
+ --pixel-line-height-display-medium: 56px;
51
+ --pixel-line-height-display-large: 72px;
52
+ // font
53
+ --pixel-font-link-small: var(--pixel-font-size-link-small) /
54
+ var(--pixel-line-height-link-small) var(--pixel-font-family);
55
+ --pixel-font-link-medium: var(--pixel-font-size-link-medium) /
56
+ var(--pixel-line-height-link-medium) var(--pixel-font-family);
57
+ --pixel-font-link-large: var(--pixel-font-size-link-large) /
58
+ var(--pixel-line-height-link-large) var(--pixel-font-family);
59
+ --pixel-font-mark-small: 600 var(--pixel-font-size-mark-small) /
60
+ var(--pixel-line-height-mark-small) var(--pixel-font-family);
61
+ --pixel-font-mark-medium: 600 var(--pixel-font-size-mark-medium) /
62
+ var(--pixel-line-height-mark-medium) var(--pixel-font-family);
63
+ --pixel-font-body-small: var(--pixel-font-size-body-small) /
64
+ var(--pixel-line-height-body-small) var(--pixel-font-family);
65
+ --pixel-font-body-medium: var(--pixel-font-size-body-medium) /
66
+ var(--pixel-line-height-body-medium) var(--pixel-font-family);
67
+ --pixel-font-body-large: var(--pixel-font-size-body-large) /
68
+ var(--pixel-line-height-body-large) var(--pixel-font-family);
69
+ --pixel-font-title-small: 600 var(--pixel-font-size-title-small) /
70
+ var(--pixel-line-height-title-small) var(--pixel-font-family);
71
+ --pixel-font-title-medium: 600 var(--pixel-font-size-title-medium) /
72
+ var(--pixel-line-height-title-medium) var(--pixel-font-family);
73
+ --pixel-font-title-large: 600 var(--pixel-font-size-title-large) /
74
+ var(--pixel-line-height-title-large) var(--pixel-font-family);
75
+ --pixel-font-headline-small: 600 var(--pixel-font-size-headline-small) /
76
+ var(--pixel-line-height-headline-small) var(--pixel-font-family);
77
+ --pixel-font-headline-medium: 600 var(--pixel-font-size-headline-medium) /
78
+ var(--pixel-line-height-headline-medium) var(--pixel-font-family);
79
+ --pixel-font-headline-large: 600 var(--pixel-font-size-headline-large) /
80
+ var(--pixel-line-height-headline-large) var(--pixel-font-family);
81
+ --pixel-font-display-medium: 600 var(--pixel-font-size-display-medium) /
82
+ var(--pixel-line-height-display-medium) var(--pixel-font-family);
83
+ --pixel-font-display-large: 600 var(--pixel-font-size-display-large) /
84
+ var(--pixel-line-height-display-large) var(--pixel-font-family);
85
+ }
package/packages/styles/theme/light.less ADDED
@@ -0,0 +1,263 @@
1
+ /*
2
+ * @description: UI 组件浅色模式主题样式
3
+ * 组件变量名称可按如下规则定义：
4
+ * --pixel-[attr]-<scene>-<type>-<status>
5
+ * pixel：公共的，
6
+ * attr: 属性名称，如 color、height、radius 等
7
+ * scene: 属性的具体应用场景。如颜色[用于背景（bg）、文本（text）、边框（border）等]
8
+ * type: 用途类型，如 button 的次要按钮（line）
9
+ * status: 表示组件状态或尺寸，如 hover、disabled、s、l 等
10
+ * @author: MC.Yang
11
+ */
12
+ :root,
13
+ :root[theme-mode="light"] {
14
+ // 固定颜色
15
+ // 白色
16
+ --pixel-color-white: #fff;
17
+ // 黑色
18
+ --pixel-color-black: rgb(68, 68, 68);
19
+ --pixel-color-black-dark: rgb(23, 23, 23);
20
+ --pixel-color-black-light: lighten(rgb(23, 23, 23), 28%);
21
+ --pixel-color-black-fade: lighten(rgb(68, 68, 68), 69%);
22
+ // 灰色
23
+ --pixel-color-gray: #DDDEE0;
24
+ --pixel-color-gray-dark: darken(#DDDEE0, 15%);
25
+ --pixel-color-gray-deep-dark: rgb(139, 139, 139);
26
+ --pixel-color-gray-fade: rgb(235, 235, 235);
27
+ --pixel-color-gray-deep-fade: rgb(240, 242, 245);
28
+ --pixel-color-gray-1: #f3f3f3;
29
+ --pixel-color-gray-2: #eee;
30
+ --pixel-color-gray-3: #e8e8e8;
31
+ --pixel-color-gray-4: #ddd;
32
+ --pixel-color-gray-5: #c6c6c6;
33
+ --pixel-color-gray-6: #a6a6a6;
34
+ --pixel-color-gray-7: #8b8b8b;
35
+ --pixel-color-gray-8: #777;
36
+ --pixel-color-gray-9: #5e5e5e;
37
+ --pixel-color-gray-10: #4b4b4b;
38
+ --pixel-color-gray-11: #393939;
39
+ --pixel-color-gray-12: #2c2c2c;
40
+ --pixel-color-gray-13: #242424;
41
+ --pixel-color-gray-14: #181818;
42
+
43
+ // 颜色值变动常量
44
+ @darken-1: 1%;
45
+ @darken-5: 5%;
46
+ @darken-10: 10%;
47
+ @darken-15: 15%;
48
+ @darken-30: 30%;
49
+ @darken-40: 40%;
50
+ @darken-50: 50%;
51
+
52
+ @lighten-10: 10%;
53
+ @lighten-15: 15%;
54
+ @lighten-30: 30%;
55
+
56
+ // 基础颜色
57
+ @pixel-color-brand: #366ef4;
58
+ --pixel-color-brand: darken(@pixel-color-brand, @darken-1);
59
+ // 基础颜色的扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态
60
+ --pixel-color-brand-hover: darken(@pixel-color-brand, @darken-10); // 悬停
61
+ --pixel-color-brand-focus: darken(@pixel-color-brand, @darken-5); // 焦点
62
+ --pixel-color-brand-active: darken(@pixel-color-brand, @darken-30); // 点击
63
+ --pixel-color-brand-disabled: lighten(@pixel-color-brand, @darken-50); // 禁用
64
+
65
+ --pixel-color-brand-light: darken(@pixel-color-brand, @darken-5); // 高亮
66
+ --pixel-color-brand-light-hover: darken(@pixel-color-brand, @darken-15); // 高亮悬停
67
+ --pixel-color-brand-light-focus: darken(@pixel-color-brand, @darken-10); // 高亮焦点
68
+ --pixel-color-brand-light-active: darken(@pixel-color-brand, @darken-40); // 高亮点击
69
+
70
+ --pixel-color-brand-fade: lighten(@pixel-color-brand, @lighten-30); // 浅色
71
+ --pixel-color-brand-fade-hover: lighten(@pixel-color-brand, @lighten-15); // 浅色悬停
72
+ --pixel-color-brand-fade-focus: lighten(@pixel-color-brand, @lighten-10); // 浅色焦点
73
+ --pixel-color-brand-fade-active: lighten(@pixel-color-brand, @lighten-10); // 浅色点击
74
+
75
+ // 警告颜色
76
+ @pixel-color-warning: #e37318;
77
+ --pixel-color-warning: darken(@pixel-color-warning, @darken-1);
78
+ // 警告颜色扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态
79
+ --pixel-color-warning-hover: darken(@pixel-color-warning, @darken-10);
80
+ --pixel-color-warning-focus: darken(@pixel-color-warning, @darken-5);
81
+ --pixel-color-warning-active: darken(@pixel-color-warning, @darken-30);
82
+ --pixel-color-warning-disabled: lighten(@pixel-color-warning, @darken-50);
83
+
84
+ --pixel-color-warning-light: darken(@pixel-color-warning, @darken-5);
85
+ --pixel-color-warning-light-hover: darken(@pixel-color-warning, @darken-15);
86
+ --pixel-color-warning-light-focus: darken(@pixel-color-warning, @darken-10);
87
+ --pixel-color-warning-light-active: darken(@pixel-color-warning, @darken-40);
88
+
89
+ --pixel-color-warning-fade: lighten(@pixel-color-warning, @lighten-30);
90
+ --pixel-color-warning-fade-hover: lighten(@pixel-color-warning, @lighten-15);
91
+ --pixel-color-warning-fade-focus: lighten(@pixel-color-warning, @lighten-10);
92
+ --pixel-color-warning-fade-active: lighten(@pixel-color-warning, @lighten-10);
93
+
94
+ // 失败/错误颜色
95
+ @pixel-color-danger: #d54941;
96
+ --pixel-color-danger: darken(@pixel-color-danger, @darken-1);
97
+ // 失败/错误色扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态
98
+ --pixel-color-danger-hover: darken(@pixel-color-danger, @darken-10);
99
+ --pixel-color-danger-focus: darken(@pixel-color-danger, @darken-5);
100
+ --pixel-color-danger-active: darken(@pixel-color-danger, @darken-30);
101
+ --pixel-color-danger-disabled: lighten(@pixel-color-danger, @darken-50);
102
+
103
+ --pixel-color-danger-light: darken(@pixel-color-danger, @darken-5);
104
+ --pixel-color-danger-light-hover: darken(@pixel-color-danger, @darken-15);
105
+ --pixel-color-danger-light-focus: darken(@pixel-color-danger, @darken-10);
106
+ --pixel-color-danger-light-active: darken(@pixel-color-danger, @darken-40);
107
+
108
+ --pixel-color-danger-fade: lighten(@pixel-color-danger, @lighten-30);
109
+ --pixel-color-danger-fade-hover: lighten(@pixel-color-danger, @lighten-15);
110
+ --pixel-color-danger-fade-focus: lighten(@pixel-color-danger, @lighten-10);
111
+ --pixel-color-danger-fade-active: lighten(@pixel-color-danger, @lighten-10);
112
+
113
+ // 成功颜色
114
+ @pixel-color-success: #a9d32e;
115
+ --pixel-color-success: darken(@pixel-color-success, @darken-1);
116
+ // 成功颜色扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态
117
+ --pixel-color-success-hover: darken(@pixel-color-success, @darken-10);
118
+ --pixel-color-success-focus: darken(@pixel-color-success, @darken-5);
119
+ --pixel-color-success-active: darken(@pixel-color-success, @darken-30);
120
+ --pixel-color-success-disabled: lighten(@pixel-color-success, @darken-50);
121
+
122
+ --pixel-color-success-light: darken(@pixel-color-success, @darken-5);
123
+ --pixel-color-success-light-hover: darken(@pixel-color-success, @darken-15);
124
+ --pixel-color-success-light-focus: darken(@pixel-color-success, @darken-10);
125
+ --pixel-color-success-light-active: darken(@pixel-color-success, @darken-40);
126
+
127
+ --pixel-color-success-fade: lighten(@pixel-color-success, @lighten-30);
128
+ --pixel-color-success-fade-hover: lighten(@pixel-color-success, @lighten-15);
129
+ --pixel-color-success-fade-focus: lighten(@pixel-color-success, @lighten-10);
130
+ --pixel-color-success-fade-active: lighten(@pixel-color-success, @lighten-10);
131
+
132
+ // 重要颜色
133
+ @pixel-color-primary: #db5b6c;
134
+ --pixel-color-primary: darken(@pixel-color-primary, @darken-1);
135
+ // 重要颜色扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态
136
+ --pixel-color-primary-hover: darken(@pixel-color-primary, @darken-10);
137
+ --pixel-color-primary-focus: darken(@pixel-color-primary, @darken-5);
138
+ --pixel-color-primary-active: darken(@pixel-color-primary, @darken-30);
139
+ --pixel-color-primary-disabled: lighten(@pixel-color-primary, @darken-50);
140
+
141
+ --pixel-color-primary-light: darken(@pixel-color-primary, @darken-5);
142
+ --pixel-color-primary-light-hover: darken(@pixel-color-primary, @darken-15);
143
+ --pixel-color-primary-light-focus: darken(@pixel-color-primary, @darken-10);
144
+ --pixel-color-primary-light-active: darken(@pixel-color-primary, @darken-40);
145
+
146
+ --pixel-color-primary-fade: lighten(@pixel-color-primary, @lighten-30);
147
+ --pixel-color-primary-fade-hover: lighten(@pixel-color-primary, @lighten-15);
148
+ --pixel-color-primary-fade-focus: lighten(@pixel-color-primary, @lighten-10);
149
+ --pixel-color-primary-fade-active: lighten(@pixel-color-primary, @lighten-10);
150
+
151
+ // 信息颜色
152
+ @pixel-color-info: #2ebd99;
153
+ --pixel-color-info: darken(@pixel-color-info, @darken-1);
154
+ // 信息颜色扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态
155
+ --pixel-color-info-hover: darken(@pixel-color-info, @darken-10);
156
+ --pixel-color-info-focus: darken(@pixel-color-info, @darken-5);
157
+ --pixel-color-info-active: darken(@pixel-color-info, @darken-30);
158
+ --pixel-color-info-disabled: lighten(@pixel-color-info, @darken-50);
159
+
160
+ --pixel-color-info-light: darken(@pixel-color-info, @darken-5);
161
+ --pixel-color-info-light-hover: darken(@pixel-color-info, @darken-15);
162
+ --pixel-color-info-light-focus: darken(@pixel-color-info, @darken-10);
163
+ --pixel-color-info-light-active: darken(@pixel-color-info, @darken-40);
164
+
165
+ --pixel-color-info-fade: lighten(@pixel-color-info, @lighten-30);
166
+ --pixel-color-info-fade-hover: lighten(@pixel-color-info, @lighten-15);
167
+ --pixel-color-info-fade-focus: lighten(@pixel-color-info, @lighten-10);
168
+ --pixel-color-info-fade-active: lighten(@pixel-color-info, @lighten-10);
169
+
170
+ // 青颜色
171
+ @pixel-color-cyan: #A172D0;
172
+ --pixel-color-cyan: darken(@pixel-color-cyan, @darken-1);
173
+ // 青颜色色扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态
174
+ --pixel-color-cyan-hover: darken(@pixel-color-cyan, @darken-10);
175
+ --pixel-color-cyan-focus: darken(@pixel-color-cyan, @darken-5);
176
+ --pixel-color-cyan-active: darken(@pixel-color-cyan, @darken-30);
177
+ --pixel-color-cyan-disabled: lighten(@pixel-color-cyan, @darken-50);
178
+
179
+ --pixel-color-cyan-light: darken(@pixel-color-cyan, @darken-5);
180
+ --pixel-color-cyan-light-hover: darken(@pixel-color-cyan, @darken-15);
181
+ --pixel-color-cyan-light-focus: darken(@pixel-color-cyan, @darken-10);
182
+ --pixel-color-cyan-light-active: darken(@pixel-color-cyan, @darken-40);
183
+
184
+ --pixel-color-cyan-fade: lighten(@pixel-color-cyan, @lighten-30);
185
+ --pixel-color-cyan-fade-hover: lighten(@pixel-color-cyan, @lighten-15);
186
+ --pixel-color-cyan-fade-focus: lighten(@pixel-color-cyan, @lighten-10);
187
+ --pixel-color-cyan-fade-active: lighten(@pixel-color-cyan, @lighten-10);
188
+
189
+ // 文字 & 图标 颜色
190
+ --pixel-color-font-white-1: rgba(255, 255, 255, 100%);
191
+ --pixel-color-font-white-2: rgba(255, 255, 255, 55%);
192
+ --pixel-color-font-white-3: rgba(255, 255, 255, 35%);
193
+ --pixel-color-font-white-4: rgba(255, 255, 255, 22%);
194
+ --pixel-color-font-gray-1: rgba(0, 0, 0, 90%);
195
+ --pixel-color-font-gray-2: rgba(0, 0, 0, 60%);
196
+ --pixel-color-font-gray-3: rgba(0, 0, 0, 40%);
197
+ --pixel-color-font-gray-4: rgba(0, 0, 0, 26%);
198
+
199
+ // 遮罩
200
+ --pixel-color-mask-active: rgba(0, 0, 0, 60%); // 遮罩-弹出
201
+ --pixel-color-mask-disabled: rgba(255, 255, 255, 60%); // 遮罩-禁用
202
+
203
+ // 背景色
204
+ --pixel-color-bg: #fff;
205
+ --pixel-color-bg-page: var(--pixel-color-gray-2); // 色彩 - page
206
+ --pixel-color-bg-container: #fff; // 色彩 - 容器
207
+ --pixel-color-bg-container-hover: var(--pixel-color-gray-1); // 色彩 - 容器 - hover
208
+ --pixel-color-bg-container-active: var(--pixel-color-gray-3); // 色彩 - 容器 - active
209
+ --pixel-color-bg-container-select: #fff; // 色彩 - 容器 - select
210
+ --pixel-color-bg-secondarycontainer: var(--pixel-color-gray-1); // 色彩 - 次级容器
211
+ --pixel-color-bg-secondarycontainer-hover: var(--pixel-color-gray-2); // 色彩 - 次级容器 - hover
212
+ --pixel-color-bg-secondarycontainer-active: var(--pixel-color-gray-4); // 色彩 - 次级容器 - active
213
+ --pixel-color-bg-component: var(--pixel-color-gray-3); // 色彩 - 组件
214
+ --pixel-color-bg-component-hover: var(--pixel-color-gray-4); // 色彩 - 组件 - hover
215
+ --pixel-color-bg-component-active: var(--pixel-color-gray-6); // 色彩 - 组件 - active
216
+ --pixel-color-bg-secondarycomponent: var(--pixel-color-gray-4); // 色彩 - 次级组件
217
+ --pixel-color-bg-secondarycomponent-hover: var(--pixel-color-gray-5); // 色彩 - 次级组件 - hover
218
+ --pixel-color-bg-secondarycomponent-active: var(--pixel-color-gray-6); // 色彩 - 次级组件 - active
219
+ --pixel-color-bg-component-disabled: var(--pixel-color-gray-2); // 色彩 - 组件 - disabled
220
+
221
+ // 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
222
+ --pixel-color-bg-specialcomponent: #fff;
223
+
224
+ // 文本颜色
225
+ --pixel-color-text: #fff; // 色彩-文字-反色
226
+ --pixel-color-text-primary: var(--pixel-color-font-gray-1); // 色彩-文字-主要
227
+ --pixel-color-text-secondary: var(--pixel-color-font-gray-2); // 色彩-文字-次要
228
+ --pixel-color-text-placeholder: var(--pixel-color-font-gray-3); // 色彩-文字-占位符/说明
229
+ --pixel-color-text-disabled: var(--pixel-color-font-gray-4); // 色彩-文字-禁用
230
+ --pixel-color-text-brand: var(--pixel-color-brand); // 色彩-文字-品牌
231
+ --pixel-color-text-link: var(--pixel-color-brand); // 色彩-文字-链接
232
+
233
+ // 分割线
234
+ --pixel-color-border-level-1: var(--pixel-color-gray-3);
235
+ --pixel-color-component-stroke: var(--pixel-color-gray-3);
236
+
237
+ // 边框
238
+ --pixel-color-border-level-2: var(--pixel-color-gray-4);
239
+ --pixel-color-component-border: var(--pixel-color-gray-4);
240
+
241
+ // 基础/下层 投影 hover 使用的组件包括：表格 /
242
+ --pixel-color-shadow-1: 0 1px 10px rgba(0, 0, 0, 5%), 0 4px 5px rgba(0, 0, 0, 8%), 0 2px 4px -1px rgba(0, 0, 0, 12%);
243
+ // 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认框 / 选择器 /
244
+ --pixel-color-shadow-2: 0 3px 14px 2px rgba(0, 0, 0, 5%), 0 8px 10px 1px rgba(0, 0, 0, 6%), 0 5px 5px -3px rgba(0, 0, 0, 10%);
245
+ // 上层投影（警示/弹窗）使用的组件包括：全局提示 / 消息通知
246
+ --pixel-color-shadow-3: 0 6px 30px 5px rgba(0, 0, 0, 5%), 0 16px 24px 2px rgba(0, 0, 0, 4%), 0 8px 10px -5px rgba(0, 0, 0, 8%);
247
+
248
+ // 内投影 用于弹窗类组件（气泡确认框 / 全局提示 / 消息通知）的内描边
249
+ --pixel-color-shadow-inset-top: inset 0 .5px 0 #dcdcdc;
250
+ --pixel-color-shadow-inset-right: inset .5px 0 0 #dcdcdc;
251
+ --pixel-color-shadow-inset-bottom: inset 0 -.5px 0 #dcdcdc;
252
+ --pixel-color-shadow-inset-left: inset -.5px 0 0 #dcdcdc;
253
+
254
+ // table 特定阴影
255
+ --pixel-color-table-shadow: rgba(0, 0, 0, 8%);
256
+
257
+ // 滚动条颜色
258
+ --pixel-color-scrollbar: rgba(0, 0, 0, 10%);
259
+ // 滚动条悬浮颜色（ hover ）
260
+ --pixel-color-scrollbar-hover: rgba(0, 0, 0, 30%);
261
+ // 滚动条轨道颜色，不能是带透明度，否则纵向滚动时，横向滚动条会穿透
262
+ --pixel-color-scroll-track: #fff;
263
+ }
package/packages/styles/theme/radius.less ADDED
@@ -0,0 +1,20 @@
1
+ /*
2
+ * @description: UI 组件 border-radius 相关样式
3
+ * 组件变量名称可按如下规则定义：
4
+ * --pixel-[attr]-<scene>-<type>-<status>
5
+ * pixel：公共的，
6
+ * attr: 属性名称，如 color、height、radius 等
7
+ * scene: 属性的具体应用场景。如颜色[用于背景（bg）、文本（text）、边框（border）等]
8
+ * type: 用途类型，如 button 的次要按钮（line）
9
+ * status: 表示组件状态或尺寸，如 hover、disabled、s、l 等
10
+ * @author: MC.Yang
11
+ */
12
+ :root {
13
+ --pixel-radius-small: 2px;
14
+ --pixel-radius-default: 3px;
15
+ --pixel-radius-medium: 6px;
16
+ --pixel-radius-large: 9px;
17
+ --pixel-radius-extraLarge: 12px;
18
+ --pixel-radius-round: 999px;
19
+ --pixel-radius-circle: 50%;
20
+ }