@tendaui/components 1.2.4 → 1.3.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 (406) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +176 -176
  3. package/_util/scroll.ts +9 -0
  4. package/alert/_example/base.tsx +13 -0
  5. package/alert/_example/collapse.tsx +15 -0
  6. package/badge/_example/base.tsx +10 -0
  7. package/badge/_example/count.tsx +29 -0
  8. package/badge/_example/custom-color.tsx +32 -0
  9. package/badge/_example/dot.tsx +26 -0
  10. package/badge/_example/max-count.tsx +26 -0
  11. package/badge/_example/offset.tsx +29 -0
  12. package/badge/_example/shape.tsx +32 -0
  13. package/badge/_example/show-zero.tsx +23 -0
  14. package/badge/_example/size.tsx +35 -0
  15. package/badge/_example/standalone.tsx +14 -0
  16. package/badge/_example/text-count.tsx +26 -0
  17. package/badge/_example/with-button.tsx +23 -0
  18. package/button/_example/block.tsx +18 -0
  19. package/button/_example/disabled.tsx +22 -0
  20. package/button/_example/ghost.tsx +24 -0
  21. package/button/_example/link.tsx +15 -0
  22. package/button/_example/loading.tsx +19 -0
  23. package/button/_example/shape.tsx +18 -0
  24. package/button/_example/size.tsx +18 -0
  25. package/button/_example/suffix.tsx +16 -0
  26. package/button/_example/theme.tsx +14 -0
  27. package/button/_example/variant-base.tsx +24 -0
  28. package/button/_example/variant-dashed.tsx +24 -0
  29. package/button/_example/variant-outline.tsx +24 -0
  30. package/button/_example/variant-text.tsx +24 -0
  31. package/checkbox/_example/base.tsx +8 -0
  32. package/checkbox/_example/controlled.tsx +11 -0
  33. package/checkbox/_example/group-disabled.tsx +13 -0
  34. package/checkbox/_example/group-with-check-all.tsx +22 -0
  35. package/checkbox/_example/group-with-max.tsx +17 -0
  36. package/checkbox/_example/group-with-options.tsx +18 -0
  37. package/checkbox/_example/group.tsx +17 -0
  38. package/checkbox/_example/states.tsx +19 -0
  39. package/color-picker/ColorPicker.tsx +16 -2
  40. package/color-picker/_example/base.tsx +12 -0
  41. package/color-picker/_example/borderless.tsx +17 -0
  42. package/color-picker/_example/clearable.tsx +12 -0
  43. package/color-picker/_example/disabled.tsx +17 -0
  44. package/color-picker/_example/formats.tsx +30 -0
  45. package/color-picker/_example/manual-input.tsx +39 -0
  46. package/color-picker/_example/recent-colors.tsx +19 -0
  47. package/color-picker/_example/swatch-colors.tsx +28 -0
  48. package/color-picker/_example/with-alpha.tsx +21 -0
  49. package/color-picker/components/panel/format/inputs.tsx +1 -1
  50. package/color-picker/components/panel/index.tsx +13 -0
  51. package/color-picker/components/trigger.tsx +64 -13
  52. package/color-picker/defaultProps.ts +4 -1
  53. package/color-picker/utils/color-picker/cmyk.ts +89 -89
  54. package/color-picker/utils/color-picker/color.ts +467 -467
  55. package/color-picker/utils/color-picker/constants.ts +187 -187
  56. package/color-picker/utils/color-picker/draggable.ts +99 -100
  57. package/color-picker/utils/color-picker/format.ts +90 -95
  58. package/color-picker/utils/color-picker/gradient.ts +237 -243
  59. package/color-picker/utils/color-picker/index.ts +7 -7
  60. package/color-picker/utils/color-picker/types.ts +33 -33
  61. package/config-provider/ConfigContext.tsx +1 -0
  62. package/config-provider/ConfigProvider.tsx +18 -1
  63. package/config-provider/type.ts +5 -0
  64. package/dialog/_example/base.tsx +27 -0
  65. package/dialog/_example/confirm-loading.tsx +32 -0
  66. package/dialog/_example/custom-buttons.tsx +24 -0
  67. package/dialog/_example/full-screen.tsx +26 -0
  68. package/dialog/_example/hide-buttons.tsx +39 -0
  69. package/dialog/_example/modeless.tsx +25 -0
  70. package/dialog/_example/placement.tsx +40 -0
  71. package/dialog/_example/plugin-example.tsx +69 -0
  72. package/dialog/_example/themes.tsx +41 -0
  73. package/dialog/hooks/useDialogPosition.ts +35 -35
  74. package/drawer/Drawer.tsx +17 -9
  75. package/drawer/_example/custom-header-footer.tsx +29 -0
  76. package/drawer/_example/default.tsx +20 -0
  77. package/drawer/_example/events.tsx +53 -0
  78. package/drawer/_example/no-footer.tsx +20 -0
  79. package/drawer/_example/no-overlay.tsx +20 -0
  80. package/drawer/_example/placement.tsx +43 -0
  81. package/drawer/_example/size-draggable.tsx +26 -0
  82. package/drawer/_example/size.tsx +40 -0
  83. package/drawer/defaultProps.ts +1 -1
  84. package/fireworks/Fireworks.tsx +1 -10
  85. package/fireworks/index.ts +0 -1
  86. package/fireworks/type.ts +0 -1
  87. package/form/_example/complex.tsx +76 -0
  88. package/form/_example/default.tsx +58 -0
  89. package/form/_example/disabled.tsx +26 -0
  90. package/form/_example/form-list.tsx +74 -0
  91. package/form/_example/inline-layout.tsx +20 -0
  92. package/form/_example/label-align.tsx +46 -0
  93. package/form/_example/methods.tsx +66 -0
  94. package/form/_example/validation.tsx +71 -0
  95. package/form/hooks/useFormItemStyle.tsx +19 -7
  96. package/form/index.ts +20 -2
  97. package/form/type.ts +519 -519
  98. package/global-config/default-config.ts +95 -95
  99. package/global-config/locale/ar_KW.ts +259 -270
  100. package/global-config/locale/en_US.ts +265 -280
  101. package/global-config/locale/it_IT.ts +264 -287
  102. package/global-config/locale/ja_JP.ts +264 -279
  103. package/global-config/locale/ko_KR.ts +264 -279
  104. package/global-config/locale/ru_RU.ts +277 -288
  105. package/global-config/locale/zh_CN.ts +265 -279
  106. package/global-config/locale/zh_TW.ts +265 -279
  107. package/global-config/mobile/default-config.ts +6 -6
  108. package/global-config/mobile/locale/ar_KW.ts +112 -113
  109. package/global-config/mobile/locale/en_US.ts +113 -114
  110. package/global-config/mobile/locale/it_IT.ts +113 -114
  111. package/global-config/mobile/locale/ja_JP.ts +100 -101
  112. package/global-config/mobile/locale/ko_KR.ts +100 -101
  113. package/global-config/mobile/locale/ru_RU.ts +112 -113
  114. package/global-config/mobile/locale/zh_CN.ts +100 -101
  115. package/global-config/mobile/locale/zh_TW.ts +100 -101
  116. package/global-config/t.ts +111 -111
  117. package/hooks/useDebounce.ts +27 -0
  118. package/hooks/useLastest.ts +6 -2
  119. package/hooks/useResizeObserve.ts +0 -1
  120. package/index.ts +1 -1
  121. package/input/Input.tsx +53 -10
  122. package/input/_example/auto-width.tsx +14 -0
  123. package/input/_example/borderless.tsx +17 -0
  124. package/input/_example/clearable.tsx +14 -0
  125. package/input/_example/default.tsx +10 -0
  126. package/input/_example/disabled-readonly.tsx +12 -0
  127. package/input/_example/events.tsx +42 -0
  128. package/input/_example/group.tsx +14 -0
  129. package/input/_example/label-suffix.tsx +12 -0
  130. package/input/_example/max-length.tsx +11 -0
  131. package/input/_example/password.tsx +14 -0
  132. package/input/_example/sizes.tsx +12 -0
  133. package/input/_example/status.tsx +13 -0
  134. package/input/_example/text-align.tsx +12 -0
  135. package/input/_example/with-icon.tsx +13 -0
  136. package/input/type.ts +3 -0
  137. package/input/useLengthLimit.ts +122 -0
  138. package/input-number/InputNumber.tsx +124 -124
  139. package/input-number/_example/align.tsx +23 -0
  140. package/input-number/_example/auto-width.tsx +8 -0
  141. package/input-number/_example/default.tsx +8 -0
  142. package/input-number/_example/events.tsx +45 -0
  143. package/input-number/_example/format.tsx +27 -0
  144. package/input-number/_example/large-number.tsx +17 -0
  145. package/input-number/_example/min-max.tsx +14 -0
  146. package/input-number/_example/sizes.tsx +35 -0
  147. package/input-number/_example/status.tsx +65 -0
  148. package/input-number/_example/step-and-decimal.tsx +14 -0
  149. package/input-number/_example/themes.tsx +21 -0
  150. package/input-number/_example/with-suffix.tsx +12 -0
  151. package/input-number/defaultProps.ts +17 -17
  152. package/input-number/index.ts +9 -9
  153. package/input-number/style/css.js +1 -1
  154. package/input-number/style/index.js +1 -1
  155. package/input-number/useInputNumber.tsx +270 -270
  156. package/ip-input/_example/controlled.tsx +26 -0
  157. package/ip-input/_example/default.tsx +12 -0
  158. package/ip-input/_example/full-featured.tsx +32 -0
  159. package/ip-input/_example/ipv6.tsx +23 -0
  160. package/ip-input/_example/keyboard-navigation.tsx +19 -0
  161. package/ip-input/_example/paste-demo.tsx +23 -0
  162. package/ip-input/_example/states.tsx +21 -0
  163. package/ip-input/_example/with-cidr.tsx +23 -0
  164. package/layout/_example/combine-left.tsx +54 -0
  165. package/layout/_example/combine-right.tsx +54 -0
  166. package/layout/_example/custom-aside-width.tsx +56 -0
  167. package/layout/_example/custom-height.tsx +45 -0
  168. package/layout/_example/double-sidebar.tsx +57 -0
  169. package/layout/_example/side-navigation-right.tsx +51 -0
  170. package/layout/_example/side-navigation.tsx +51 -0
  171. package/layout/_example/top-navigation.tsx +41 -0
  172. package/list/ListItem.tsx +36 -36
  173. package/list/ListItemMeta.tsx +40 -40
  174. package/list/_example/async-loading.tsx +46 -0
  175. package/list/_example/default.tsx +23 -0
  176. package/list/_example/header-footer.tsx +40 -0
  177. package/list/_example/multiline.tsx +24 -0
  178. package/list/_example/scroll-loading.tsx +69 -0
  179. package/list/_example/sizes.tsx +45 -0
  180. package/list/_example/split.tsx +36 -0
  181. package/list/_example/stripe.tsx +24 -0
  182. package/list/_example/virtual-scroll.tsx +51 -0
  183. package/list/_example/with-image.tsx +26 -0
  184. package/list/defaultProps.ts +11 -11
  185. package/list/hooks/useListVirtualScroll.ts +82 -82
  186. package/list/style/css.js +1 -1
  187. package/list/style/index.js +1 -1
  188. package/loading/_example/default.tsx +6 -0
  189. package/loading/_example/delay.tsx +53 -0
  190. package/loading/_example/fullscreen.tsx +29 -0
  191. package/loading/_example/inherit-color.tsx +24 -0
  192. package/loading/_example/no-overlay.tsx +15 -0
  193. package/loading/_example/sizes.tsx +25 -0
  194. package/loading/_example/with-text.tsx +12 -0
  195. package/loading/_example/wrapper.tsx +30 -0
  196. package/locale/LocalReceiver.ts +55 -55
  197. package/locale/ar_KW.ts +7 -7
  198. package/locale/en_US.ts +7 -7
  199. package/locale/it_IT.ts +6 -6
  200. package/locale/ja_JP.ts +6 -6
  201. package/locale/ko_KR.ts +6 -6
  202. package/locale/ru_RU.ts +6 -6
  203. package/locale/zh_CN.ts +5 -5
  204. package/locale/zh_TW.ts +7 -7
  205. package/notification/_example/default.tsx +31 -0
  206. package/notification/_example/long-content.tsx +37 -0
  207. package/notification/_example/stacking.tsx +40 -0
  208. package/notification/_example/types.tsx +78 -0
  209. package/notification/_example/usage-example.tsx +62 -0
  210. package/package.json +4 -3
  211. package/popup/Popup.tsx +17 -5
  212. package/popup/_example/controlled.tsx +32 -0
  213. package/popup/_example/custom-content.tsx +64 -0
  214. package/popup/_example/default.tsx +19 -0
  215. package/popup/_example/delay.tsx +35 -0
  216. package/popup/_example/disabled.tsx +17 -0
  217. package/popup/_example/no-arrow.tsx +17 -0
  218. package/popup/_example/placements.tsx +61 -0
  219. package/popup/_example/triggers.tsx +26 -0
  220. package/radio/_example/allow-uncheck.tsx +19 -0
  221. package/radio/_example/button-style.tsx +40 -0
  222. package/radio/_example/controlled.tsx +13 -0
  223. package/radio/_example/default.tsx +13 -0
  224. package/radio/_example/group-disabled.tsx +22 -0
  225. package/radio/_example/group-with-options.tsx +20 -0
  226. package/radio/_example/group.tsx +19 -0
  227. package/radio/_example/sizes.tsx +37 -0
  228. package/radio/_example/states.tsx +20 -0
  229. package/select/_example/collapsed.tsx +30 -0
  230. package/select/_example/creatable.tsx +36 -0
  231. package/select/_example/custom-content.tsx +26 -0
  232. package/select/_example/default.tsx +29 -0
  233. package/select/_example/disabled.tsx +20 -0
  234. package/select/_example/filterable.tsx +27 -0
  235. package/select/_example/group-options.tsx +44 -0
  236. package/select/_example/label-suffix.tsx +24 -0
  237. package/select/_example/loading.tsx +19 -0
  238. package/select/_example/multiple.tsx +31 -0
  239. package/select/_example/sizes.tsx +20 -0
  240. package/select/_example/status.tsx +27 -0
  241. package/select/type.ts +382 -382
  242. package/select-input/type.ts +280 -280
  243. package/slider/Slider.tsx +13 -5
  244. package/slider/SliderHandleButton.tsx +50 -50
  245. package/slider/_example/custom-label.tsx +19 -0
  246. package/slider/_example/default.tsx +14 -0
  247. package/slider/_example/disabled.tsx +17 -0
  248. package/slider/_example/marks.tsx +31 -0
  249. package/slider/_example/range.tsx +16 -0
  250. package/slider/_example/step.tsx +14 -0
  251. package/slider/_example/vertical.tsx +26 -0
  252. package/slider/_example/with-input-number.tsx +21 -0
  253. package/slider/defaultProps.ts +15 -15
  254. package/slider/style/css.js +1 -1
  255. package/slider/style/index.js +1 -1
  256. package/slider/type.ts +1 -1
  257. package/styles/_global.scss +40 -40
  258. package/styles/_vars.scss +374 -358
  259. package/styles/components/alert/_index.scss +175 -175
  260. package/styles/components/alert/_vars.scss +41 -41
  261. package/styles/components/badge/_index.scss +71 -71
  262. package/styles/components/badge/_vars.scss +26 -26
  263. package/styles/components/button/_index.scss +499 -499
  264. package/styles/components/button/_mixins.scss +40 -40
  265. package/styles/components/button/_vars.scss +121 -121
  266. package/styles/components/checkbox/_index.scss +158 -158
  267. package/styles/components/checkbox/_var.scss +59 -59
  268. package/styles/components/color-picker/_index.scss +586 -586
  269. package/styles/components/color-picker/_vars.scss +79 -79
  270. package/styles/components/dialog/_animate.scss +133 -133
  271. package/styles/components/dialog/_index.scss +310 -312
  272. package/styles/components/dialog/_vars.scss +60 -60
  273. package/styles/components/drawer/_index.scss +206 -205
  274. package/styles/components/drawer/_var.scss +55 -55
  275. package/styles/components/fireworks/_index.scss +86 -86
  276. package/styles/components/fireworks/_vars.scss +5 -5
  277. package/styles/components/form/_index.scss +175 -174
  278. package/styles/components/form/_mixins.scss +74 -74
  279. package/styles/components/form/_vars.scss +101 -101
  280. package/styles/components/input/_index.scss +350 -350
  281. package/styles/components/input/_mixins.scss +120 -118
  282. package/styles/components/input/_vars.scss +130 -130
  283. package/styles/components/input-number/_index.scss +340 -339
  284. package/styles/components/input-number/_vars.scss +56 -56
  285. package/styles/components/ip-input/_index.scss +277 -277
  286. package/styles/components/layout/_index.scss +47 -47
  287. package/styles/components/layout/_vars.scss +19 -19
  288. package/styles/components/layout/doc.scss +74 -74
  289. package/styles/components/list/_index.scss +172 -172
  290. package/styles/components/list/_vars.scss +42 -42
  291. package/styles/components/loading/_index.scss +113 -113
  292. package/styles/components/loading/_vars.scss +40 -40
  293. package/styles/components/notification/_index.scss +144 -144
  294. package/styles/components/notification/_mixins.scss +13 -13
  295. package/styles/components/notification/_vars.scss +60 -60
  296. package/styles/components/popup/_index.scss +78 -78
  297. package/styles/components/popup/_mixin.scss +149 -149
  298. package/styles/components/popup/_vars.scss +33 -33
  299. package/styles/components/radio/_index.scss +376 -376
  300. package/styles/components/radio/_vars.scss +89 -89
  301. package/styles/components/select/_index.scss +291 -291
  302. package/styles/components/select/_var.scss +64 -64
  303. package/styles/components/select-input/_index.scss +5 -5
  304. package/styles/components/select-input/_var.scss +4 -4
  305. package/styles/components/slider/_index.scss +241 -241
  306. package/styles/components/slider/_vars.scss +51 -51
  307. package/styles/components/switch/_index.scss +248 -165
  308. package/styles/components/switch/_vars.scss +63 -63
  309. package/styles/components/table/_index.scss +194 -186
  310. package/styles/components/table/_var.scss +52 -52
  311. package/styles/components/tabs/_index.scss +165 -166
  312. package/styles/components/tabs/_mixins.scss +11 -11
  313. package/styles/components/tabs/_vars.scss +72 -72
  314. package/styles/components/tag/_index.scss +317 -317
  315. package/styles/components/tag/_var.scss +86 -86
  316. package/styles/components/tag-input/_index.scss +164 -164
  317. package/styles/components/tag-input/_vars.scss +17 -17
  318. package/styles/components/tooltip/_index.scss +104 -0
  319. package/styles/components/tooltip/_vars.scss +23 -0
  320. package/styles/mixins/_focus.scss +8 -8
  321. package/styles/mixins/_layout.scss +32 -32
  322. package/styles/mixins/_reset.scss +11 -11
  323. package/styles/mixins/_scrollbar.scss +32 -32
  324. package/styles/mixins/_text.scss +50 -50
  325. package/styles/themes/_dark.scss +169 -169
  326. package/styles/themes/_font.scss +69 -69
  327. package/styles/themes/_index.scss +5 -5
  328. package/styles/themes/_light.scss +170 -170
  329. package/styles/themes/_radius.scss +9 -9
  330. package/styles/themes/_size.scss +68 -68
  331. package/styles/utilities/_animation.scss +58 -58
  332. package/styles/utilities/_tips.scss +10 -10
  333. package/switch/_example/async-change.tsx +25 -0
  334. package/switch/_example/before-change.tsx +22 -0
  335. package/switch/_example/controlled.tsx +14 -0
  336. package/switch/_example/custom-value.tsx +21 -0
  337. package/switch/_example/default.tsx +6 -0
  338. package/switch/_example/disabled.tsx +25 -0
  339. package/switch/_example/loading.tsx +17 -0
  340. package/switch/_example/sizes.tsx +21 -0
  341. package/switch/_example/with-label.tsx +21 -0
  342. package/tab/TabPanel.tsx +9 -6
  343. package/tab/_example/addable.tsx +45 -0
  344. package/tab/_example/card-theme.tsx +22 -0
  345. package/tab/_example/default.tsx +22 -0
  346. package/tab/_example/disabled.tsx +38 -0
  347. package/tab/_example/lazy.tsx +25 -0
  348. package/tab/_example/placement.tsx +36 -0
  349. package/tab/_example/removable.tsx +31 -0
  350. package/tab/_example/sizes.tsx +31 -0
  351. package/tab/_example/with-action.tsx +26 -0
  352. package/table/Cell.tsx +3 -6
  353. package/table/Ellipsis.tsx +73 -0
  354. package/table/_example/alignment.tsx +46 -0
  355. package/table/_example/auto-width.tsx +47 -0
  356. package/table/_example/bordered-stripe-hover.tsx +42 -0
  357. package/table/_example/bordered.tsx +42 -0
  358. package/table/_example/cell-click.tsx +52 -0
  359. package/table/_example/complex.tsx +82 -0
  360. package/table/_example/custom-cell.tsx +68 -0
  361. package/table/_example/custom-empty.tsx +37 -0
  362. package/table/_example/custom-row-class-name.tsx +57 -0
  363. package/table/_example/default.tsx +42 -0
  364. package/table/_example/ellipsis.tsx +56 -0
  365. package/table/_example/empty.tsx +28 -0
  366. package/table/_example/fixed-width.tsx +48 -0
  367. package/table/_example/hover.tsx +42 -0
  368. package/table/_example/row-click.tsx +52 -0
  369. package/table/_example/sizes.tsx +57 -0
  370. package/table/_example/stripe.tsx +42 -0
  371. package/table/_example/vertical-align.tsx +110 -0
  372. package/table/hooks/useTableClassName.ts +3 -3
  373. package/table/index.ts +2 -0
  374. package/table/type.ts +1 -0
  375. package/tag/Tag.tsx +1 -1
  376. package/tag/_example/closable.tsx +44 -0
  377. package/tag/_example/default.tsx +17 -0
  378. package/tag/_example/disabled.tsx +19 -0
  379. package/tag/_example/sizes.tsx +18 -0
  380. package/tag/_example/variants.tsx +37 -0
  381. package/tag-input/_example/collapsed.tsx +27 -0
  382. package/tag-input/_example/controlled-uncontrolled.tsx +26 -0
  383. package/tag-input/_example/default.tsx +15 -0
  384. package/tag-input/_example/disabled-readonly.tsx +21 -0
  385. package/tag-input/_example/events.tsx +64 -0
  386. package/tag-input/_example/excess-display.tsx +27 -0
  387. package/tag-input/_example/max-tags.tsx +22 -0
  388. package/tag-input/_example/sizes.tsx +21 -0
  389. package/tag-input/_example/status.tsx +37 -0
  390. package/tag-input/_example/with-label.tsx +23 -0
  391. package/tag-input/hooks/useTagList.tsx +1 -1
  392. package/tooltip/Tooltip.tsx +76 -0
  393. package/tooltip/_example/base.tsx +26 -0
  394. package/tooltip/_example/custom-content.tsx +47 -0
  395. package/tooltip/_example/placement.tsx +33 -0
  396. package/tooltip/_example/theme.tsx +34 -0
  397. package/tooltip/defaultProps.ts +14 -0
  398. package/tooltip/index.ts +7 -0
  399. package/tooltip/style/index.js +1 -0
  400. package/tooltip/type.ts +99 -0
  401. package/utils/input-number/large-number.ts +423 -423
  402. package/utils/input-number/number.ts +257 -257
  403. package/utils/log/index.ts +3 -3
  404. package/utils/log/log.ts +29 -30
  405. package/utils/log/types.ts +9 -12
  406. package/utils/style.ts +58 -58
package/styles/themes/_font.scss CHANGED
@@ -1,69 +1,69 @@
1
- // 字体相关token
2
- :root {
3
- // 字体family token
4
- --td-font-family: PingFang SC, Microsoft YaHei, Arial Regular;
5
- --td-font-family-medium: PingFang SC, Microsoft YaHei, Arial Medium;
6
-
7
- // 字体大小 token
8
- --td-font-size-link-small: 12px;
9
- --td-font-size-link-medium: 14px;
10
- --td-font-size-link-large: 16px;
11
- --td-font-size-mark-small: 12px;
12
- --td-font-size-mark-medium: 14px;
13
- --td-font-size-body-small: 12px;
14
- --td-font-size-body-medium: 14px;
15
- --td-font-size-body-large: 16px;
16
- --td-font-size-title-small: 14px;
17
- --td-font-size-title-medium: 16px;
18
- --td-font-size-title-large: 18px;
19
- --td-font-size-title-extraLarge: 20px;
20
- --td-font-size-headline-small: 24px;
21
- --td-font-size-headline-medium: 28px;
22
- --td-font-size-headline-large: 36px;
23
- --td-font-size-display-medium: 48px;
24
- --td-font-size-display-large: 64px;
25
-
26
- // 字体行高 token
27
- --td-line-height-link-small: 20px;
28
- --td-line-height-link-medium: 22px;
29
- --td-line-height-link-large: 24px;
30
- --td-line-height-mark-small: 20px;
31
- --td-line-height-mark-medium: 22px;
32
- --td-line-height-body-small: 20px;
33
- --td-line-height-body-medium: 22px;
34
- --td-line-height-body-large: 24px;
35
- --td-line-height-title-small: 22px;
36
- --td-line-height-title-medium: 24px;
37
- --td-line-height-title-large: 26px;
38
- --td-line-height-title-extraLarge: 28px;
39
- --td-line-height-headline-small: 32px;
40
- --td-line-height-headline-medium: 36px;
41
- --td-line-height-headline-large: 44px;
42
- --td-line-height-display-medium: 56px;
43
- --td-line-height-display-large: 72px;
44
- // font token
45
- --td-font-link-small: var(--td-font-size-link-small) / var(--td-line-height-link-small) var(--td-font-family);
46
- --td-font-link-medium: var(--td-font-size-link-medium) / var(--td-line-height-link-medium) var(--td-font-family);
47
- --td-font-link-large: var(--td-font-size-link-large) / var(--td-line-height-link-large) var(--td-font-family);
48
- --td-font-mark-small: 600 var(--td-font-size-mark-small) / var(--td-line-height-mark-small) var(--td-font-family);
49
- --td-font-mark-medium: 600 var(--td-font-size-mark-medium) / var(--td-line-height-mark-medium) var(--td-font-family);
50
- --td-font-body-small: var(--td-font-size-body-small) / var(--td-line-height-body-small) var(--td-font-family);
51
- --td-font-body-medium: var(--td-font-size-body-medium) / var(--td-line-height-body-medium) var(--td-font-family);
52
- --td-font-body-large: var(--td-font-size-body-large) / var(--td-line-height-body-large) var(--td-font-family);
53
- --td-font-title-small: 600 var(--td-font-size-title-small) / var(--td-line-height-title-small) var(--td-font-family);
54
- --td-font-title-medium: 600 var(--td-font-size-title-medium) / var(--td-line-height-title-medium)
55
- var(--td-font-family);
56
- --td-font-title-large: 600 var(--td-font-size-title-large) / var(--td-line-height-title-large) var(--td-font-family);
57
- --td-font-title-extraLarge: 600 var(--td-font-size-title-extraLarge) / var(--td-line-height-title-extraLarge)
58
- var(--td-font-family);
59
- --td-font-headline-small: 600 var(--td-font-size-headline-small) / var(--td-line-height-headline-small)
60
- var(--td-font-family);
61
- --td-font-headline-medium: 600 var(--td-font-size-headline-medium) / var(--td-line-height-headline-medium)
62
- var(--td-font-family);
63
- --td-font-headline-large: 600 var(--td-font-size-headline-large) / var(--td-line-height-headline-large)
64
- var(--td-font-family);
65
- --td-font-display-medium: 600 var(--td-font-size-display-medium) / var(--td-line-height-display-medium)
66
- var(--td-font-family);
67
- --td-font-display-large: 600 var(--td-font-size-display-large) / var(--td-line-height-display-large)
68
- var(--td-font-family);
69
- }
1
+ // 字体相关token
2
+ :root {
3
+ // 字体family token
4
+ --td-font-family: PingFang SC, Microsoft YaHei, Arial Regular;
5
+ --td-font-family-medium: PingFang SC, Microsoft YaHei, Arial Medium;
6
+
7
+ // 字体大小 token
8
+ --td-font-size-link-small: 12px;
9
+ --td-font-size-link-medium: 14px;
10
+ --td-font-size-link-large: 16px;
11
+ --td-font-size-mark-small: 12px;
12
+ --td-font-size-mark-medium: 14px;
13
+ --td-font-size-body-small: 12px;
14
+ --td-font-size-body-medium: 14px;
15
+ --td-font-size-body-large: 16px;
16
+ --td-font-size-title-small: 14px;
17
+ --td-font-size-title-medium: 16px;
18
+ --td-font-size-title-large: 18px;
19
+ --td-font-size-title-extraLarge: 20px;
20
+ --td-font-size-headline-small: 24px;
21
+ --td-font-size-headline-medium: 28px;
22
+ --td-font-size-headline-large: 36px;
23
+ --td-font-size-display-medium: 48px;
24
+ --td-font-size-display-large: 64px;
25
+
26
+ // 字体行高 token
27
+ --td-line-height-link-small: 20px;
28
+ --td-line-height-link-medium: 22px;
29
+ --td-line-height-link-large: 24px;
30
+ --td-line-height-mark-small: 20px;
31
+ --td-line-height-mark-medium: 22px;
32
+ --td-line-height-body-small: 20px;
33
+ --td-line-height-body-medium: 22px;
34
+ --td-line-height-body-large: 24px;
35
+ --td-line-height-title-small: 22px;
36
+ --td-line-height-title-medium: 24px;
37
+ --td-line-height-title-large: 26px;
38
+ --td-line-height-title-extraLarge: 28px;
39
+ --td-line-height-headline-small: 32px;
40
+ --td-line-height-headline-medium: 36px;
41
+ --td-line-height-headline-large: 44px;
42
+ --td-line-height-display-medium: 56px;
43
+ --td-line-height-display-large: 72px;
44
+ // font token
45
+ --td-font-link-small: var(--td-font-size-link-small) / var(--td-line-height-link-small) var(--td-font-family);
46
+ --td-font-link-medium: var(--td-font-size-link-medium) / var(--td-line-height-link-medium) var(--td-font-family);
47
+ --td-font-link-large: var(--td-font-size-link-large) / var(--td-line-height-link-large) var(--td-font-family);
48
+ --td-font-mark-small: 600 var(--td-font-size-mark-small) / var(--td-line-height-mark-small) var(--td-font-family);
49
+ --td-font-mark-medium: 600 var(--td-font-size-mark-medium) / var(--td-line-height-mark-medium) var(--td-font-family);
50
+ --td-font-body-small: var(--td-font-size-body-small) / var(--td-line-height-body-small) var(--td-font-family);
51
+ --td-font-body-medium: var(--td-font-size-body-medium) / var(--td-line-height-body-medium) var(--td-font-family);
52
+ --td-font-body-large: var(--td-font-size-body-large) / var(--td-line-height-body-large) var(--td-font-family);
53
+ --td-font-title-small: 600 var(--td-font-size-title-small) / var(--td-line-height-title-small) var(--td-font-family);
54
+ --td-font-title-medium: 600 var(--td-font-size-title-medium) / var(--td-line-height-title-medium)
55
+ var(--td-font-family);
56
+ --td-font-title-large: 600 var(--td-font-size-title-large) / var(--td-line-height-title-large) var(--td-font-family);
57
+ --td-font-title-extraLarge: 600 var(--td-font-size-title-extraLarge) / var(--td-line-height-title-extraLarge)
58
+ var(--td-font-family);
59
+ --td-font-headline-small: 600 var(--td-font-size-headline-small) / var(--td-line-height-headline-small)
60
+ var(--td-font-family);
61
+ --td-font-headline-medium: 600 var(--td-font-size-headline-medium) / var(--td-line-height-headline-medium)
62
+ var(--td-font-family);
63
+ --td-font-headline-large: 600 var(--td-font-size-headline-large) / var(--td-line-height-headline-large)
64
+ var(--td-font-family);
65
+ --td-font-display-medium: 600 var(--td-font-size-display-medium) / var(--td-line-height-display-medium)
66
+ var(--td-font-family);
67
+ --td-font-display-large: 600 var(--td-font-size-display-large) / var(--td-line-height-display-large)
68
+ var(--td-font-family);
69
+ }
package/styles/themes/_index.scss CHANGED
@@ -1,5 +1,5 @@
1
- @use './_light.scss' as *;
2
- @use './_dark.scss' as *;
3
- @use './size.scss' as *;
4
- @use './radius.scss' as *;
5
- @use './_font.scss' as *;
1
+ @use './_light.scss' as *;
2
+ @use './_dark.scss' as *;
3
+ @use './size.scss' as *;
4
+ @use './radius.scss' as *;
5
+ @use './_font.scss' as *;
package/styles/themes/_light.scss CHANGED
@@ -1,170 +1,170 @@
1
- :root,
2
- :root[theme-mode="light"] {
3
- --td-brand-color-1: #f2f3ff;
4
- --td-brand-color-2: #d9e1ff;
5
- --td-brand-color-3: #b5c7ff;
6
- --td-brand-color-4: #8eabff;
7
- --td-brand-color-5: #618dff;
8
- --td-brand-color-6: #366ef4;
9
- --td-brand-color-7: #0052d9;
10
- --td-brand-color-8: #003cab;
11
- --td-brand-color-9: #002a7c;
12
- --td-brand-color-10: #001a57;
13
- --td-warning-color-1: #fff1e9;
14
- --td-warning-color-2: #ffd9c2;
15
- --td-warning-color-3: #ffb98c;
16
- --td-warning-color-4: #fa9550;
17
- --td-warning-color-5: #e37318;
18
- --td-warning-color-6: #be5a00;
19
- --td-warning-color-7: #954500;
20
- --td-warning-color-8: #713300;
21
- --td-warning-color-9: #532300;
22
- --td-warning-color-10: #3b1700;
23
- --td-error-color-1: #fff0ed;
24
- --td-error-color-2: #ffd8d2;
25
- --td-error-color-3: #ffb9b0;
26
- --td-error-color-4: #ff9285;
27
- --td-error-color-5: #f6685d;
28
- --td-error-color-6: #d54941;
29
- --td-error-color-7: #ad352f;
30
- --td-error-color-8: #881f1c;
31
- --td-error-color-9: #68070a;
32
- --td-error-color-10: #490002;
33
- --td-success-color-1: #e3f9e9;
34
- --td-success-color-2: #c6f3d7;
35
- --td-success-color-3: #92dab2;
36
- --td-success-color-4: #56c08d;
37
- --td-success-color-5: #2ba471;
38
- --td-success-color-6: #008858;
39
- --td-success-color-7: #006c45;
40
- --td-success-color-8: #005334;
41
- --td-success-color-9: #003b23;
42
- --td-success-color-10: #002515;
43
- --td-gray-color-1: #f3f3f3;
44
- --td-gray-color-2: #eee;
45
- --td-gray-color-3: #e8e8e8;
46
- --td-gray-color-4: #ddd;
47
- --td-gray-color-5: #c6c6c6;
48
- --td-gray-color-6: #a6a6a6;
49
- --td-gray-color-7: #8b8b8b;
50
- --td-gray-color-8: #777;
51
- --td-gray-color-9: #5e5e5e;
52
- --td-gray-color-10: #4b4b4b;
53
- --td-gray-color-11: #393939;
54
- --td-gray-color-12: #2c2c2c;
55
- --td-gray-color-13: #242424;
56
- --td-gray-color-14: #181818;
57
-
58
- // 文字 & 图标 颜色
59
- --td-font-white-1: rgba(255, 255, 255, 100%);
60
- --td-font-white-2: rgba(255, 255, 255, 55%);
61
- --td-font-white-3: rgba(255, 255, 255, 35%);
62
- --td-font-white-4: rgba(255, 255, 255, 22%);
63
- --td-font-gray-1: rgba(0, 0, 0, 90%);
64
- --td-font-gray-2: rgba(0, 0, 0, 60%);
65
- --td-font-gray-3: rgba(0, 0, 0, 40%);
66
- --td-font-gray-4: rgba(0, 0, 0, 26%);
67
-
68
- // 基础颜色
69
- --td-brand-color: var(--td-brand-color-7); // 色彩-品牌-可操作
70
- --td-warning-color: var(--td-warning-color-5); // 色彩-功能-警告
71
- --td-error-color: var(--td-error-color-6); // 色彩-功能-失败
72
- --td-success-color: var(--td-success-color-5); // 色彩-功能-成功
73
-
74
- // 基础颜色的扩充用于 hover / 聚焦 / 禁用 / 点击 等状态
75
- --td-brand-color-hover: var(--td-brand-color-6); // hover
76
- --td-brand-color-focus: var(--td-brand-color-2); // focus态，包括鼠标和键盘
77
- --td-brand-color-active: var(--td-brand-color-8); // 点击
78
- --td-brand-color-disabled: var(--td-brand-color-3); // 禁用
79
- --td-brand-color-light: var(--td-brand-color-1); // 浅色的选中
80
- --td-brand-color-light-hover: var(--td-brand-color-2);
81
-
82
- // 警告色扩充
83
- --td-warning-color-hover: var(--td-warning-color-4);
84
- --td-warning-color-focus: var(--td-warning-color-2);
85
- --td-warning-color-active: var(--td-warning-color-6);
86
- --td-warning-color-disabled: var(--td-warning-color-3);
87
- --td-warning-color-light: var(--td-warning-color-1);
88
- --td-warning-color-light-hover: var(--td-warning-color-2);
89
-
90
- // 失败/错误色扩充
91
- --td-error-color-hover: var(--td-error-color-5);
92
- --td-error-color-focus: var(--td-error-color-2);
93
- --td-error-color-active: var(--td-error-color-7);
94
- --td-error-color-disabled: var(--td-error-color-3);
95
- --td-error-color-light: var(--td-error-color-1);
96
- --td-error-color-light-hover: var(--td-error-color-2);
97
-
98
- // 成功色扩充
99
- --td-success-color-hover: var(--td-success-color-4);
100
- --td-success-color-focus: var(--td-success-color-2);
101
- --td-success-color-active: var(--td-success-color-6);
102
- --td-success-color-disabled: var(--td-success-color-3);
103
- --td-success-color-light: var(--td-success-color-1);
104
- --td-success-color-light-hover: var(--td-success-color-2);
105
-
106
- // 遮罩
107
- --td-mask-active: rgba(0, 0, 0, 60%); // 遮罩-弹出
108
- --td-mask-disabled: rgba(255, 255, 255, 60%); // 遮罩-禁用
109
- --td-mask-background: rgba(255, 255, 255, 96%); // 二维码遮罩
110
-
111
- // 背景颜色
112
- --td-bg-color-page: var(--td-gray-color-2); // 色彩 - page
113
- --td-bg-color-container: #fff; // 色彩 - 容器
114
- --td-bg-color-container-hover: var(--td-gray-color-1); // 色彩 - 容器 - hover
115
- --td-bg-color-container-active: var(--td-gray-color-3); // 色彩 - 容器 - active
116
- --td-bg-color-container-select: #fff; // 色彩 - 容器 - select
117
- --td-bg-color-secondarycontainer: var(--td-gray-color-1); // 色彩 - 次级容器
118
- --td-bg-color-secondarycontainer-hover: var(--td-gray-color-2); // 色彩 - 次级容器 - hover
119
- --td-bg-color-secondarycontainer-active: var(--td-gray-color-4); // 色彩 - 次级容器 - active
120
- --td-bg-color-component: var(--td-gray-color-3); // 色彩 - 组件
121
- --td-bg-color-component-hover: var(--td-gray-color-4); // 色彩 - 组件 - hover
122
- --td-bg-color-component-active: var(--td-gray-color-6); // 色彩 - 组件 - active
123
- --td-bg-color-secondarycomponent: var(--td-gray-color-4); // 色彩 - 次级组件
124
- --td-bg-color-secondarycomponent-hover: var(--td-gray-color-5); // 色彩 - 次级组件 - hover
125
- --td-bg-color-secondarycomponent-active: var(--td-gray-color-6); // 色彩 - 次级组件 - active
126
- --td-bg-color-component-disabled: var(--td-gray-color-2); // 色彩 - 组件 - disabled
127
-
128
- // 特殊组件背景色，目前只用button、input 组件多主题场景，浅色主题下固定为白色，深色主题下transparent 适配背景颜色
129
- --td-bg-color-specialcomponent: #fff;
130
-
131
- // 文本颜色
132
- --td-text-color-primary: var(--td-font-gray-1); // 色彩-文字-主要
133
- --td-text-color-secondary: var(--td-font-gray-2); // 色彩-文字-次要
134
- --td-text-color-placeholder: var(--td-font-gray-3); // 色彩-文字-占位说明
135
- --td-text-color-disabled: var(--td-font-gray-4); // 色彩-文字-禁用
136
- --td-text-color-anti: #fff; // 色彩-文字-反色
137
- --td-text-color-brand: var(--td-brand-color-7); // 色彩-文字-品牌
138
- --td-text-color-link: var(--td-brand-color-8); // 色彩-文字-链接
139
- --td-text-color-watermark: rgba(0, 0, 0, 10%); // 色彩-文字-水印颜色
140
-
141
- // 分割线
142
- --td-border-level-1-color: var(--td-gray-color-3);
143
- --td-component-stroke: var(--td-gray-color-3);
144
- // 边框
145
- --td-border-level-2-color: var(--td-gray-color-4);
146
- --td-component-border: var(--td-gray-color-4);
147
-
148
- // 基础/下层 投影 hover 使用的组件包括：表格
149
- --td-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%);
150
- // 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认 / 选择
151
- --td-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%);
152
- // 上层投影（警告/弹窗）使用的组件包括：全局提示 / 消息通知
153
- --td-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%);
154
-
155
- // 内投影用于弹窗类组件（气泡确认 / 全局提示 / 消息通知）的内描影
156
- --td-shadow-inset-top: inset 0 0.5px 0 #dcdcdc;
157
- --td-shadow-inset-right: inset 0.5px 0 0 #dcdcdc;
158
- --td-shadow-inset-bottom: inset 0 -0.5px 0 #dcdcdc;
159
- --td-shadow-inset-left: inset -0.5px 0 0 #dcdcdc;
160
-
161
- // table 特定阴影
162
- --td-table-shadow-color: rgba(0, 0, 0, 8%);
163
-
164
- // 滚动条颜色
165
- --td-scrollbar-color: rgba(0, 0, 0, 10%);
166
- // 滚动条悬浮颜色（ hover ）
167
- --td-scrollbar-hover-color: rgba(0, 0, 0, 30%);
168
- // 滚动条轨道颜色，不能是带透明度，否则纵向滚动时，横向滚动条会穿透
169
- --td-scroll-track-color: #fff;
170
- }
1
+ :root,
2
+ :root[theme-mode="light"] {
3
+ --td-brand-color-1: #f2f3ff;
4
+ --td-brand-color-2: #d9e1ff;
5
+ --td-brand-color-3: #b5c7ff;
6
+ --td-brand-color-4: #8eabff;
7
+ --td-brand-color-5: #618dff;
8
+ --td-brand-color-6: #366ef4;
9
+ --td-brand-color-7: #0052d9;
10
+ --td-brand-color-8: #003cab;
11
+ --td-brand-color-9: #002a7c;
12
+ --td-brand-color-10: #001a57;
13
+ --td-warning-color-1: #fff1e9;
14
+ --td-warning-color-2: #ffd9c2;
15
+ --td-warning-color-3: #ffb98c;
16
+ --td-warning-color-4: #fa9550;
17
+ --td-warning-color-5: #e37318;
18
+ --td-warning-color-6: #be5a00;
19
+ --td-warning-color-7: #954500;
20
+ --td-warning-color-8: #713300;
21
+ --td-warning-color-9: #532300;
22
+ --td-warning-color-10: #3b1700;
23
+ --td-error-color-1: #fff0ed;
24
+ --td-error-color-2: #ffd8d2;
25
+ --td-error-color-3: #ffb9b0;
26
+ --td-error-color-4: #ff9285;
27
+ --td-error-color-5: #f6685d;
28
+ --td-error-color-6: #d54941;
29
+ --td-error-color-7: #ad352f;
30
+ --td-error-color-8: #881f1c;
31
+ --td-error-color-9: #68070a;
32
+ --td-error-color-10: #490002;
33
+ --td-success-color-1: #e3f9e9;
34
+ --td-success-color-2: #c6f3d7;
35
+ --td-success-color-3: #92dab2;
36
+ --td-success-color-4: #56c08d;
37
+ --td-success-color-5: #2ba471;
38
+ --td-success-color-6: #008858;
39
+ --td-success-color-7: #006c45;
40
+ --td-success-color-8: #005334;
41
+ --td-success-color-9: #003b23;
42
+ --td-success-color-10: #002515;
43
+ --td-gray-color-1: #f3f3f3;
44
+ --td-gray-color-2: #eee;
45
+ --td-gray-color-3: #e8e8e8;
46
+ --td-gray-color-4: #ddd;
47
+ --td-gray-color-5: #c6c6c6;
48
+ --td-gray-color-6: #a6a6a6;
49
+ --td-gray-color-7: #8b8b8b;
50
+ --td-gray-color-8: #777;
51
+ --td-gray-color-9: #5e5e5e;
52
+ --td-gray-color-10: #4b4b4b;
53
+ --td-gray-color-11: #393939;
54
+ --td-gray-color-12: #2c2c2c;
55
+ --td-gray-color-13: #242424;
56
+ --td-gray-color-14: #181818;
57
+
58
+ // 文字 & 图标 颜色
59
+ --td-font-white-1: rgba(255, 255, 255, 100%);
60
+ --td-font-white-2: rgba(255, 255, 255, 55%);
61
+ --td-font-white-3: rgba(255, 255, 255, 35%);
62
+ --td-font-white-4: rgba(255, 255, 255, 22%);
63
+ --td-font-gray-1: rgba(0, 0, 0, 90%);
64
+ --td-font-gray-2: rgba(0, 0, 0, 60%);
65
+ --td-font-gray-3: rgba(0, 0, 0, 40%);
66
+ --td-font-gray-4: rgba(0, 0, 0, 26%);
67
+
68
+ // 基础颜色
69
+ --td-brand-color: var(--td-brand-color-7); // 色彩-品牌-可操作
70
+ --td-warning-color: var(--td-warning-color-5); // 色彩-功能-警告
71
+ --td-error-color: var(--td-error-color-6); // 色彩-功能-失败
72
+ --td-success-color: var(--td-success-color-5); // 色彩-功能-成功
73
+
74
+ // 基础颜色的扩充用于 hover / 聚焦 / 禁用 / 点击 等状态
75
+ --td-brand-color-hover: var(--td-brand-color-6); // hover
76
+ --td-brand-color-focus: var(--td-brand-color-2); // focus态，包括鼠标和键盘
77
+ --td-brand-color-active: var(--td-brand-color-8); // 点击
78
+ --td-brand-color-disabled: var(--td-brand-color-3); // 禁用
79
+ --td-brand-color-light: var(--td-brand-color-1); // 浅色的选中
80
+ --td-brand-color-light-hover: var(--td-brand-color-2);
81
+
82
+ // 警告色扩充
83
+ --td-warning-color-hover: var(--td-warning-color-4);
84
+ --td-warning-color-focus: var(--td-warning-color-2);
85
+ --td-warning-color-active: var(--td-warning-color-6);
86
+ --td-warning-color-disabled: var(--td-warning-color-3);
87
+ --td-warning-color-light: var(--td-warning-color-1);
88
+ --td-warning-color-light-hover: var(--td-warning-color-2);
89
+
90
+ // 失败/错误色扩充
91
+ --td-error-color-hover: var(--td-error-color-5);
92
+ --td-error-color-focus: var(--td-error-color-2);
93
+ --td-error-color-active: var(--td-error-color-7);
94
+ --td-error-color-disabled: var(--td-error-color-3);
95
+ --td-error-color-light: var(--td-error-color-1);
96
+ --td-error-color-light-hover: var(--td-error-color-2);
97
+
98
+ // 成功色扩充
99
+ --td-success-color-hover: var(--td-success-color-4);
100
+ --td-success-color-focus: var(--td-success-color-2);
101
+ --td-success-color-active: var(--td-success-color-6);
102
+ --td-success-color-disabled: var(--td-success-color-3);
103
+ --td-success-color-light: var(--td-success-color-1);
104
+ --td-success-color-light-hover: var(--td-success-color-2);
105
+
106
+ // 遮罩
107
+ --td-mask-active: rgba(0, 0, 0, 60%); // 遮罩-弹出
108
+ --td-mask-disabled: rgba(255, 255, 255, 60%); // 遮罩-禁用
109
+ --td-mask-background: rgba(255, 255, 255, 96%); // 二维码遮罩
110
+
111
+ // 背景颜色
112
+ --td-bg-color-page: var(--td-gray-color-2); // 色彩 - page
113
+ --td-bg-color-container: #fff; // 色彩 - 容器
114
+ --td-bg-color-container-hover: var(--td-gray-color-1); // 色彩 - 容器 - hover
115
+ --td-bg-color-container-active: var(--td-gray-color-3); // 色彩 - 容器 - active
116
+ --td-bg-color-container-select: #fff; // 色彩 - 容器 - select
117
+ --td-bg-color-secondarycontainer: var(--td-gray-color-1); // 色彩 - 次级容器
118
+ --td-bg-color-secondarycontainer-hover: var(--td-gray-color-2); // 色彩 - 次级容器 - hover
119
+ --td-bg-color-secondarycontainer-active: var(--td-gray-color-4); // 色彩 - 次级容器 - active
120
+ --td-bg-color-component: var(--td-gray-color-3); // 色彩 - 组件
121
+ --td-bg-color-component-hover: var(--td-gray-color-4); // 色彩 - 组件 - hover
122
+ --td-bg-color-component-active: var(--td-gray-color-6); // 色彩 - 组件 - active
123
+ --td-bg-color-secondarycomponent: var(--td-gray-color-4); // 色彩 - 次级组件
124
+ --td-bg-color-secondarycomponent-hover: var(--td-gray-color-5); // 色彩 - 次级组件 - hover
125
+ --td-bg-color-secondarycomponent-active: var(--td-gray-color-6); // 色彩 - 次级组件 - active
126
+ --td-bg-color-component-disabled: var(--td-gray-color-2); // 色彩 - 组件 - disabled
127
+
128
+ // 特殊组件背景色，目前只用button、input 组件多主题场景，浅色主题下固定为白色，深色主题下transparent 适配背景颜色
129
+ --td-bg-color-specialcomponent: #fff;
130
+
131
+ // 文本颜色
132
+ --td-text-color-primary: var(--td-font-gray-1); // 色彩-文字-主要
133
+ --td-text-color-secondary: var(--td-font-gray-2); // 色彩-文字-次要
134
+ --td-text-color-placeholder: var(--td-font-gray-3); // 色彩-文字-占位说明
135
+ --td-text-color-disabled: var(--td-font-gray-4); // 色彩-文字-禁用
136
+ --td-text-color-anti: #fff; // 色彩-文字-反色
137
+ --td-text-color-brand: var(--td-brand-color-7); // 色彩-文字-品牌
138
+ --td-text-color-link: var(--td-brand-color-8); // 色彩-文字-链接
139
+ --td-text-color-watermark: rgba(0, 0, 0, 10%); // 色彩-文字-水印颜色
140
+
141
+ // 分割线
142
+ --td-border-level-1-color: var(--td-gray-color-3);
143
+ --td-component-stroke: var(--td-gray-color-3);
144
+ // 边框
145
+ --td-border-level-2-color: var(--td-gray-color-4);
146
+ --td-component-border: var(--td-gray-color-4);
147
+
148
+ // 基础/下层 投影 hover 使用的组件包括：表格
149
+ --td-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%);
150
+ // 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认 / 选择
151
+ --td-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%);
152
+ // 上层投影（警告/弹窗）使用的组件包括：全局提示 / 消息通知
153
+ --td-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%);
154
+
155
+ // 内投影用于弹窗类组件（气泡确认 / 全局提示 / 消息通知）的内描影
156
+ --td-shadow-inset-top: inset 0 0.5px 0 #dcdcdc;
157
+ --td-shadow-inset-right: inset 0.5px 0 0 #dcdcdc;
158
+ --td-shadow-inset-bottom: inset 0 -0.5px 0 #dcdcdc;
159
+ --td-shadow-inset-left: inset -0.5px 0 0 #dcdcdc;
160
+
161
+ // table 特定阴影
162
+ --td-table-shadow-color: rgba(0, 0, 0, 8%);
163
+
164
+ // 滚动条颜色
165
+ --td-scrollbar-color: rgba(0, 0, 0, 10%);
166
+ // 滚动条悬浮颜色（ hover ）
167
+ --td-scrollbar-hover-color: rgba(0, 0, 0, 30%);
168
+ // 滚动条轨道颜色，不能是带透明度，否则纵向滚动时，横向滚动条会穿透
169
+ --td-scroll-track-color: #fff;
170
+ }
package/styles/themes/_radius.scss CHANGED
@@ -1,9 +1,9 @@
1
- :root {
2
- --td-radius-small: 2px;
3
- --td-radius-default: 3px;
4
- --td-radius-medium: 6px;
5
- --td-radius-large: 9px;
6
- --td-radius-extraLarge: 12px;
7
- --td-radius-round: 999px;
8
- --td-radius-circle: 50%;
9
- }
1
+ :root {
2
+ --td-radius-small: 2px;
3
+ --td-radius-default: 3px;
4
+ --td-radius-medium: 6px;
5
+ --td-radius-large: 9px;
6
+ --td-radius-extraLarge: 12px;
7
+ --td-radius-round: 999px;
8
+ --td-radius-circle: 50%;
9
+ }
package/styles/themes/_size.scss CHANGED
@@ -1,68 +1,68 @@
1
- // size/margin/padding相关 token
2
- :root {
3
- --td-size-1: 2px;
4
- --td-size-2: 4px;
5
- --td-size-3: 6px;
6
- --td-size-4: 8px;
7
- --td-size-5: 12px;
8
- --td-size-6: 16px;
9
- --td-size-7: 20px;
10
- --td-size-8: 24px;
11
- --td-size-9: 28px;
12
- --td-size-10: 32px;
13
- --td-size-11: 36px;
14
- --td-size-12: 40px;
15
- --td-size-13: 48px;
16
- --td-size-14: 56px;
17
- --td-size-15: 64px;
18
- --td-size-16: 72px;
19
-
20
- //全局 component 组件尺寸高度相关 token
21
- --td-comp-size-xxxs: var(--td-size-6);
22
- --td-comp-size-xxs: var(--td-size-7);
23
- --td-comp-size-xs: var(--td-size-8);
24
- --td-comp-size-s: var(--td-size-9);
25
- --td-comp-size-m: var(--td-size-10);
26
- --td-comp-size-l: var(--td-size-11);
27
- --td-comp-size-xl: var(--td-size-12);
28
- --td-comp-size-xxl: var(--td-size-13);
29
- --td-comp-size-xxxl: var(--td-size-14);
30
- --td-comp-size-xxxxl: var(--td-size-15);
31
- --td-comp-size-xxxxxl: var(--td-size-16);
32
-
33
- //全局 popup 弹出层整体边距token
34
- --td-pop-padding-s: var(--td-size-2);
35
- --td-pop-padding-m: var(--td-size-3);
36
- --td-pop-padding-l: var(--td-size-4);
37
- --td-pop-padding-xl: var(--td-size-5);
38
- --td-pop-padding-xxl: var(--td-size-6);
39
-
40
- //全局 component 组件左右边距 token
41
- --td-comp-paddingLR-xxs: var(--td-size-1);
42
- --td-comp-paddingLR-xs: var(--td-size-2);
43
- --td-comp-paddingLR-s: var(--td-size-4);
44
- --td-comp-paddingLR-m: var(--td-size-5);
45
- --td-comp-paddingLR-l: var(--td-size-6);
46
- --td-comp-paddingLR-xl: var(--td-size-8);
47
- --td-comp-paddingLR-xxl: var(--td-size-10);
48
-
49
- //全局 component 组件上下边距 token
50
- --td-comp-paddingTB-xxs: var(--td-size-1);
51
- --td-comp-paddingTB-xs: var(--td-size-2);
52
- --td-comp-paddingTB-s: var(--td-size-4);
53
- --td-comp-paddingTB-m: var(--td-size-5);
54
- --td-comp-paddingTB-l: var(--td-size-6);
55
- --td-comp-paddingTB-xl: var(--td-size-8);
56
- --td-comp-paddingTB-xxl: var(--td-size-10);
57
-
58
- //全局 component 组件间距 token
59
- --td-comp-margin-xxs: var(--td-size-1);
60
- --td-comp-margin-xs: var(--td-size-2);
61
- --td-comp-margin-s: var(--td-size-4);
62
- --td-comp-margin-m: var(--td-size-5);
63
- --td-comp-margin-l: var(--td-size-6);
64
- --td-comp-margin-xl: var(--td-size-7);
65
- --td-comp-margin-xxl: var(--td-size-8);
66
- --td-comp-margin-xxxl: var(--td-size-10);
67
- --td-comp-margin-xxxxl: var(--td-size-12);
68
- }
1
+ // size/margin/padding相关 token
2
+ :root {
3
+ --td-size-1: 2px;
4
+ --td-size-2: 4px;
5
+ --td-size-3: 6px;
6
+ --td-size-4: 8px;
7
+ --td-size-5: 12px;
8
+ --td-size-6: 16px;
9
+ --td-size-7: 20px;
10
+ --td-size-8: 24px;
11
+ --td-size-9: 28px;
12
+ --td-size-10: 32px;
13
+ --td-size-11: 36px;
14
+ --td-size-12: 40px;
15
+ --td-size-13: 48px;
16
+ --td-size-14: 56px;
17
+ --td-size-15: 64px;
18
+ --td-size-16: 72px;
19
+
20
+ //全局 component 组件尺寸高度相关 token
21
+ --td-comp-size-xxxs: var(--td-size-6);
22
+ --td-comp-size-xxs: var(--td-size-7);
23
+ --td-comp-size-xs: var(--td-size-8);
24
+ --td-comp-size-s: var(--td-size-9);
25
+ --td-comp-size-m: var(--td-size-10);
26
+ --td-comp-size-l: var(--td-size-11);
27
+ --td-comp-size-xl: var(--td-size-12);
28
+ --td-comp-size-xxl: var(--td-size-13);
29
+ --td-comp-size-xxxl: var(--td-size-14);
30
+ --td-comp-size-xxxxl: var(--td-size-15);
31
+ --td-comp-size-xxxxxl: var(--td-size-16);
32
+
33
+ //全局 popup 弹出层整体边距token
34
+ --td-pop-padding-s: var(--td-size-2);
35
+ --td-pop-padding-m: var(--td-size-3);
36
+ --td-pop-padding-l: var(--td-size-4);
37
+ --td-pop-padding-xl: var(--td-size-5);
38
+ --td-pop-padding-xxl: var(--td-size-6);
39
+
40
+ //全局 component 组件左右边距 token
41
+ --td-comp-paddingLR-xxs: var(--td-size-1);
42
+ --td-comp-paddingLR-xs: var(--td-size-2);
43
+ --td-comp-paddingLR-s: var(--td-size-4);
44
+ --td-comp-paddingLR-m: var(--td-size-5);
45
+ --td-comp-paddingLR-l: var(--td-size-6);
46
+ --td-comp-paddingLR-xl: var(--td-size-8);
47
+ --td-comp-paddingLR-xxl: var(--td-size-10);
48
+
49
+ //全局 component 组件上下边距 token
50
+ --td-comp-paddingTB-xxs: var(--td-size-1);
51
+ --td-comp-paddingTB-xs: var(--td-size-2);
52
+ --td-comp-paddingTB-s: var(--td-size-4);
53
+ --td-comp-paddingTB-m: var(--td-size-5);
54
+ --td-comp-paddingTB-l: var(--td-size-6);
55
+ --td-comp-paddingTB-xl: var(--td-size-8);
56
+ --td-comp-paddingTB-xxl: var(--td-size-10);
57
+
58
+ //全局 component 组件间距 token
59
+ --td-comp-margin-xxs: var(--td-size-1);
60
+ --td-comp-margin-xs: var(--td-size-2);
61
+ --td-comp-margin-s: var(--td-size-4);
62
+ --td-comp-margin-m: var(--td-size-5);
63
+ --td-comp-margin-l: var(--td-size-6);
64
+ --td-comp-margin-xl: var(--td-size-7);
65
+ --td-comp-margin-xxl: var(--td-size-8);
66
+ --td-comp-margin-xxxl: var(--td-size-10);
67
+ --td-comp-margin-xxxxl: var(--td-size-12);
68
+ }