@tendaui/components 1.0.0 → 1.2.3

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 (270) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +176 -176
  3. package/alert/Alert.tsx +3 -2
  4. package/button/_example/base.tsx +10 -0
  5. package/button/_example/icon.tsx +20 -0
  6. package/color-picker/ColorPickPanel.tsx +9 -0
  7. package/color-picker/ColorPicker.tsx +67 -0
  8. package/color-picker/components/panel/alpha.tsx +32 -0
  9. package/color-picker/components/panel/format/index.tsx +47 -0
  10. package/color-picker/components/panel/format/inputs.tsx +119 -0
  11. package/color-picker/components/panel/header.tsx +37 -0
  12. package/color-picker/components/panel/hue.tsx +20 -0
  13. package/color-picker/components/panel/index.tsx +191 -0
  14. package/color-picker/components/panel/saturation.tsx +81 -0
  15. package/color-picker/components/panel/slider.tsx +76 -0
  16. package/color-picker/components/panel/swatches.tsx +84 -0
  17. package/color-picker/components/trigger.tsx +49 -0
  18. package/color-picker/defaultProps.ts +7 -0
  19. package/color-picker/helpers.ts +53 -0
  20. package/color-picker/hooks/useClassNames.ts +9 -0
  21. package/color-picker/hooks/useStyles.ts +39 -0
  22. package/color-picker/index.ts +12 -0
  23. package/color-picker/style/css.js +1 -0
  24. package/color-picker/style/index.js +1 -0
  25. package/color-picker/type.ts +143 -0
  26. package/color-picker/utils/color-picker/cmyk.ts +89 -0
  27. package/color-picker/utils/color-picker/color.ts +467 -0
  28. package/color-picker/utils/color-picker/constants.ts +187 -0
  29. package/color-picker/utils/color-picker/draggable.ts +100 -0
  30. package/color-picker/utils/color-picker/format.ts +95 -0
  31. package/color-picker/utils/color-picker/gradient.ts +243 -0
  32. package/color-picker/utils/color-picker/index.ts +7 -0
  33. package/color-picker/utils/color-picker/types.ts +33 -0
  34. package/common/observe.ts +33 -0
  35. package/common.ts +20 -0
  36. package/config-provider/ConfigContext.tsx +4 -1
  37. package/config-provider/index.ts +1 -1
  38. package/dialog/DialogCard.tsx +4 -6
  39. package/dialog/hooks/useDialogPosition.ts +1 -2
  40. package/dialog/plugin.tsx +3 -2
  41. package/drawer/Drawer.tsx +264 -0
  42. package/drawer/defaultProps.ts +19 -0
  43. package/drawer/hooks/useDrag.ts +98 -0
  44. package/drawer/hooks/useLockStyle.ts +36 -0
  45. package/drawer/index.ts +5 -0
  46. package/drawer/style/css.js +1 -0
  47. package/drawer/style/index.js +1 -0
  48. package/drawer/type.ts +193 -0
  49. package/drawer/utils/index.ts +76 -0
  50. package/fireworks/Fireworks.tsx +138 -0
  51. package/fireworks/index.ts +10 -0
  52. package/fireworks/style/css.js +0 -0
  53. package/fireworks/style/index.js +0 -0
  54. package/fireworks/type.ts +72 -0
  55. package/form/FormItem.tsx +5 -5
  56. package/form/easing.ts +10 -0
  57. package/form/scroll.ts +124 -0
  58. package/form/type.ts +519 -519
  59. package/global-config/default-config.ts +95 -0
  60. package/global-config/locale/ar_KW.ts +270 -0
  61. package/global-config/locale/en_US.ts +280 -0
  62. package/global-config/locale/it_IT.ts +287 -0
  63. package/global-config/locale/ja_JP.ts +279 -0
  64. package/global-config/locale/ko_KR.ts +279 -0
  65. package/global-config/locale/ru_RU.ts +288 -0
  66. package/global-config/locale/zh_CN.ts +279 -0
  67. package/global-config/locale/zh_TW.ts +279 -0
  68. package/global-config/mobile/default-config.ts +6 -0
  69. package/global-config/mobile/locale/ar_KW.ts +113 -0
  70. package/global-config/mobile/locale/en_US.ts +114 -0
  71. package/global-config/mobile/locale/it_IT.ts +114 -0
  72. package/global-config/mobile/locale/ja_JP.ts +101 -0
  73. package/global-config/mobile/locale/ko_KR.ts +101 -0
  74. package/global-config/mobile/locale/ru_RU.ts +113 -0
  75. package/global-config/mobile/locale/zh_CN.ts +101 -0
  76. package/global-config/mobile/locale/zh_TW.ts +101 -0
  77. package/global-config/t.ts +111 -0
  78. package/hooks/useControlled.ts +3 -3
  79. package/hooks/useDeepEffect.ts +32 -0
  80. package/hooks/useGlobalIcon.ts +10 -3
  81. package/hooks/useLastest.ts +2 -6
  82. package/hooks/useResizeObserve.ts +36 -0
  83. package/index.ts +10 -7
  84. package/input/Input.tsx +4 -1
  85. package/input/defaultProps.ts +0 -2
  86. package/input/type.ts +1 -6
  87. package/input-number/InputNumber.tsx +124 -0
  88. package/input-number/defaultProps.ts +17 -0
  89. package/input-number/index.ts +9 -0
  90. package/input-number/style/css.js +1 -0
  91. package/input-number/style/index.js +1 -0
  92. package/input-number/type.ts +147 -0
  93. package/input-number/useInputNumber.tsx +270 -0
  94. package/ip-input/IPInput.tsx +516 -0
  95. package/ip-input/defaultProps.ts +11 -0
  96. package/ip-input/index.ts +3 -0
  97. package/ip-input/style/css.js +1 -0
  98. package/ip-input/style/index.js +1 -0
  99. package/ip-input/type.ts +115 -0
  100. package/ip-input/utils.ts +112 -0
  101. package/layout/Aside.tsx +38 -0
  102. package/layout/Layout.tsx +104 -0
  103. package/layout/defaultProps.ts +9 -0
  104. package/layout/index.ts +9 -0
  105. package/layout/style/css.js +1 -0
  106. package/layout/style/index.js +1 -0
  107. package/layout/type.ts +43 -0
  108. package/list/List.tsx +144 -0
  109. package/list/ListItem.tsx +36 -0
  110. package/list/ListItemMeta.tsx +40 -0
  111. package/list/defaultProps.ts +11 -0
  112. package/list/hooks/useListVirtualScroll.ts +82 -0
  113. package/list/index.ts +11 -0
  114. package/list/style/css.js +1 -0
  115. package/list/style/index.js +1 -0
  116. package/list/type.ts +93 -0
  117. package/locale/LocalReceiver.ts +55 -0
  118. package/locale/ar_KW.ts +7 -0
  119. package/locale/en_US.ts +7 -0
  120. package/locale/it_IT.ts +6 -0
  121. package/locale/ja_JP.ts +6 -0
  122. package/locale/ko_KR.ts +6 -0
  123. package/locale/ru_RU.ts +6 -0
  124. package/locale/zh_CN.ts +5 -0
  125. package/locale/zh_TW.ts +7 -0
  126. package/notification/NotifyContainer.tsx +2 -2
  127. package/notification/NotifyContext.tsx +1 -0
  128. package/package.json +6 -3
  129. package/popup/Popup.tsx +34 -10
  130. package/radio/Radio.tsx +24 -0
  131. package/radio/RadioGroup.tsx +159 -0
  132. package/radio/defaultProps.ts +18 -0
  133. package/radio/index.ts +12 -0
  134. package/radio/style/css.js +0 -0
  135. package/radio/style/index.js +1 -0
  136. package/radio/type.ts +115 -0
  137. package/radio/useKeyboard.ts +36 -0
  138. package/select/hooks/useOptions.ts +10 -7
  139. package/select/hooks/usePanelVirtualScroll.ts +1 -1
  140. package/select/type.ts +382 -382
  141. package/select-input/type.ts +280 -280
  142. package/slider/Slider.tsx +270 -0
  143. package/slider/SliderHandleButton.tsx +50 -0
  144. package/slider/defaultProps.ts +15 -0
  145. package/slider/index.ts +9 -0
  146. package/slider/style/css.js +1 -0
  147. package/slider/style/index.js +1 -0
  148. package/slider/type.ts +77 -0
  149. package/style/all.js +26 -0
  150. package/styles/_global.scss +39 -39
  151. package/styles/_vars.scss +358 -386
  152. package/styles/components/alert/_index.scss +175 -175
  153. package/styles/components/alert/_vars.scss +39 -39
  154. package/styles/components/badge/_index.scss +70 -70
  155. package/styles/components/badge/_vars.scss +25 -25
  156. package/styles/components/button/_index.scss +499 -511
  157. package/styles/components/button/_mixins.scss +39 -39
  158. package/styles/components/button/_vars.scss +120 -122
  159. package/styles/components/checkbox/_index.scss +158 -158
  160. package/styles/components/checkbox/_var.scss +60 -60
  161. package/styles/components/color-picker/_index.scss +586 -0
  162. package/styles/components/color-picker/_mixins.scss +0 -0
  163. package/styles/components/color-picker/_vars.scss +84 -0
  164. package/styles/components/dialog/_animate.scss +135 -135
  165. package/styles/components/dialog/_index.scss +311 -311
  166. package/styles/components/dialog/_vars.scss +59 -59
  167. package/styles/components/drawer/_index.scss +205 -0
  168. package/styles/components/drawer/_mixins.scss +1 -0
  169. package/styles/components/drawer/_var.scss +53 -0
  170. package/styles/components/fireworks/_index.scss +86 -0
  171. package/styles/components/fireworks/_vars.scss +4 -0
  172. package/styles/components/form/_index.scss +174 -174
  173. package/styles/components/form/_mixins.scss +76 -76
  174. package/styles/components/form/_vars.scss +100 -100
  175. package/styles/components/input/_index.scss +349 -349
  176. package/styles/components/input/_mixins.scss +116 -116
  177. package/styles/components/input/_vars.scss +134 -134
  178. package/styles/components/input-number/_index.scss +353 -0
  179. package/styles/components/input-number/_mixins.scss +0 -0
  180. package/styles/components/input-number/_vars.scss +65 -0
  181. package/styles/components/ip-input/_index.scss +280 -0
  182. package/styles/components/layout/_index.scss +47 -0
  183. package/styles/components/layout/_mixin.scss +0 -0
  184. package/styles/components/layout/_vars.scss +18 -0
  185. package/styles/components/layout/doc.scss +74 -0
  186. package/styles/components/list/_index.scss +172 -0
  187. package/styles/components/list/_mixins.scss +0 -0
  188. package/styles/components/list/_vars.scss +41 -0
  189. package/styles/components/loading/_index.scss +112 -112
  190. package/styles/components/loading/_vars.scss +39 -39
  191. package/styles/components/notification/_index.scss +160 -160
  192. package/styles/components/notification/_mixins.scss +12 -12
  193. package/styles/components/notification/_vars.scss +59 -59
  194. package/styles/components/popup/_index.scss +82 -82
  195. package/styles/components/popup/_mixin.scss +149 -149
  196. package/styles/components/popup/_var.scss +31 -31
  197. package/styles/components/radio/_index.scss +376 -0
  198. package/styles/components/radio/_mixins.scss +0 -0
  199. package/styles/components/radio/_var.scss +92 -0
  200. package/styles/components/select/_index.scss +290 -290
  201. package/styles/components/select/_var.scss +65 -65
  202. package/styles/components/select-input/_index.scss +5 -5
  203. package/styles/components/select-input/_var.scss +3 -3
  204. package/styles/components/slider/_index.scss +241 -0
  205. package/styles/components/slider/_mixins.scss +0 -0
  206. package/styles/components/slider/_vars.scss +50 -0
  207. package/styles/components/switch/_index.scss +279 -279
  208. package/styles/components/switch/_vars.scss +61 -61
  209. package/styles/components/table/_index.scss +193 -0
  210. package/styles/components/table/_var.scss +52 -0
  211. package/styles/components/tabs/_index.scss +165 -0
  212. package/styles/components/tabs/_mixins.scss +11 -0
  213. package/styles/components/tabs/_vars.scss +71 -0
  214. package/styles/components/tag/_index.scss +316 -316
  215. package/styles/components/tag/_var.scss +85 -85
  216. package/styles/components/tag-input/_index.scss +163 -163
  217. package/styles/components/tag-input/_vars.scss +16 -16
  218. package/styles/globals.css +250 -250
  219. package/styles/mixins/_focus.scss +7 -7
  220. package/styles/mixins/_layout.scss +32 -32
  221. package/styles/mixins/_reset.scss +10 -10
  222. package/styles/mixins/_scrollbar.scss +31 -31
  223. package/styles/mixins/_text.scss +48 -48
  224. package/styles/rillple.css +16 -16
  225. package/styles/scrollbar.css +41 -41
  226. package/styles/themes/_dark.scss +191 -191
  227. package/styles/themes/_font.scss +69 -79
  228. package/styles/themes/_index.scss +5 -5
  229. package/styles/themes/_light.scss +190 -190
  230. package/styles/themes/_radius.scss +9 -9
  231. package/styles/themes/_size.scss +68 -68
  232. package/styles/themes.css +66 -66
  233. package/styles/utilities/_animation.scss +57 -57
  234. package/styles/utilities/_tips.scss +9 -9
  235. package/tab/TabBar.tsx +85 -0
  236. package/tab/TabNav.tsx +103 -0
  237. package/tab/TabNavItem.tsx +80 -0
  238. package/tab/TabPanel.tsx +42 -0
  239. package/tab/Tabs.tsx +71 -0
  240. package/tab/defaultProps.ts +19 -0
  241. package/tab/index.ts +7 -0
  242. package/tab/style/index.js +1 -0
  243. package/tab/type.ts +125 -0
  244. package/tab/useTabClass.ts +20 -0
  245. package/table/Cell.tsx +109 -0
  246. package/table/TBody.tsx +77 -0
  247. package/table/THead.tsx +63 -0
  248. package/table/TR.tsx +78 -0
  249. package/table/Table.tsx +73 -0
  250. package/table/defaultProps.ts +14 -0
  251. package/table/hooks/index.ts +4 -0
  252. package/table/hooks/useTableClassName.ts +63 -0
  253. package/table/hooks/useTableStyle.ts +93 -0
  254. package/table/index.ts +7 -0
  255. package/table/style/css.js +1 -0
  256. package/table/style/index.js +1 -0
  257. package/table/type.ts +192 -0
  258. package/tag/Tag.tsx +1 -1
  259. package/tag-input/hooks/useTagList.tsx +1 -1
  260. package/utils/dom.ts +4 -0
  261. package/utils/forwardRefWithStatics.ts +1 -4
  262. package/utils/input-number/large-number.ts +423 -0
  263. package/utils/input-number/number.ts +257 -0
  264. package/utils/isFragment.ts +6 -6
  265. package/utils/log/index.ts +3 -0
  266. package/utils/log/log.ts +30 -0
  267. package/utils/log/types.ts +12 -0
  268. package/utils/number.ts +21 -0
  269. package/utils/scroll.ts +26 -0
  270. package/utils/style.ts +2 -4
package/styles/_vars.scss CHANGED
@@ -1,386 +1,358 @@
1
- // 公共前缀
2
- $prefix: t;
3
-
4
- // 颜色色板
5
-
6
- $brand-color-1: var(--td-brand-color-1);
7
- $brand-color-2: var(--td-brand-color-2);
8
- $brand-color-3: var(--td-brand-color-3);
9
- $brand-color-4: var(--td-brand-color-4);
10
- $brand-color-5: var(--td-brand-color-5);
11
- $brand-color-6: var(--td-brand-color-6);
12
- $brand-color-7: var(--td-brand-color-7);
13
- $brand-color-8: var(--td-brand-color-8);
14
- $brand-color-9: var(--td-brand-color-9);
15
- $brand-color-10: var(--td-brand-color-10);
16
-
17
- $warning-color-1: var(--td-warning-color-1);
18
- $warning-color-2: var(--td-warning-color-2);
19
- $warning-color-3: var(--td-warning-color-3);
20
- $warning-color-4: var(--td-warning-color-4);
21
- $warning-color-5: var(--td-warning-color-5);
22
- $warning-color-6: var(--td-warning-color-6);
23
- $warning-color-7: var(--td-warning-color-7);
24
- $warning-color-8: var(--td-warning-color-8);
25
- $warning-color-9: var(--td-warning-color-9);
26
- $warning-color-10: var(--td-warning-color-10);
27
-
28
- $error-color-1: var(--td-error-color-1);
29
- $error-color-2: var(--td-error-color-2);
30
- $error-color-3: var(--td-error-color-3);
31
- $error-color-4: var(--td-error-color-4);
32
- $error-color-5: var(--td-error-color-5);
33
- $error-color-6: var(--td-error-color-6);
34
- $error-color-7: var(--td-error-color-7);
35
- $error-color-8: var(--td-error-color-8);
36
- $error-color-9: var(--td-error-color-9);
37
- $error-color-10: var(--td-error-color-10);
38
-
39
- $success-color-1: var(--td-success-color-1);
40
- $success-color-2: var(--td-success-color-2);
41
- $success-color-3: var(--td-success-color-3);
42
- $success-color-4: var(--td-success-color-4);
43
- $success-color-5: var(--td-success-color-5);
44
- $success-color-6: var(--td-success-color-6);
45
- $success-color-7: var(--td-success-color-7);
46
- $success-color-8: var(--td-success-color-8);
47
- $success-color-9: var(--td-success-color-9);
48
- $success-color-10: var(--td-success-color-10);
49
-
50
- $gray-color-1: var(--td-gray-color-1);
51
- $gray-color-2: var(--td-gray-color-2);
52
- $gray-color-3: var(--td-gray-color-3);
53
- $gray-color-4: var(--td-gray-color-4);
54
- $gray-color-5: var(--td-gray-color-5);
55
- $gray-color-6: var(--td-gray-color-6);
56
- $gray-color-7: var(--td-gray-color-7);
57
- $gray-color-8: var(--td-gray-color-8);
58
- $gray-color-9: var(--td-gray-color-9);
59
- $gray-color-10: var(--td-gray-color-10);
60
- $gray-color-11: var(--td-gray-color-11);
61
- $gray-color-12: var(--td-gray-color-12);
62
- $gray-color-13: var(--td-gray-color-13);
63
- $gray-color-14: var(--td-gray-color-14);
64
-
65
- // 文字 & 图标 颜色
66
- $font-white-1: var(--td-font-white-1);
67
- $font-white-2: var(--td-font-white-2);
68
- $font-white-3: var(--td-font-white-3);
69
- $font-white-4: var(--td-font-white-4);
70
-
71
- $font-gray-1: var(--td-font-gray-1);
72
- $font-gray-2: var(--td-font-gray-2);
73
- $font-gray-3: var(--td-font-gray-3);
74
- $font-gray-4: var(--td-font-gray-4);
75
-
76
- // 基础颜色
77
- $brand-color: var(--td-brand-color); // 色彩-品牌-可操作
78
- $warning-color: var(--td-warning-color); // 色彩-功能-警告
79
- $error-color: var(--td-error-color); // 色彩-功能-失败
80
- $success-color: var(--td-success-color); // 色彩-功能-成功
81
-
82
- // 基础颜色的扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态
83
- $brand-color-hover: var(--td-brand-color-hover); // hover态
84
- $brand-color-focus: var(--td-brand-color-focus); // focus态，包括鼠标和键盘
85
- $brand-color-active: var(--td-brand-color-active); // 点击态
86
- $brand-color-disabled: var(--td-brand-color-disabled); // 禁用态
87
- $brand-color-light: var(--td-brand-color-light); // 浅色的选中态
88
- $brand-color-light-hover: var(--td-brand-color-light-hover);
89
-
90
- // 警告色扩展
91
- $warning-color-hover: var(--td-warning-color-hover);
92
- $warning-color-focus: var(--td-warning-color-focus);
93
- $warning-color-active: var(--td-warning-color-active);
94
- $warning-color-disabled: var(--td-warning-color-disabled);
95
- $warning-color-light: var(--td-warning-color-light);
96
- $warning-color-light-hover: var(--td-warning-color-light-hover);
97
-
98
- // 失败/错误色扩展
99
- $error-color-hover: var(--td-error-color-hover);
100
- $error-color-focus: var(--td-error-color-focus);
101
- $error-color-active: var(--td-error-color-active);
102
- $error-color-disabled: var(--td-error-color-disabled);
103
- $error-color-light: var(--td-error-color-light);
104
- $error-color-light-hover: var(--td-error-color-light-hover);
105
-
106
- // 成功色扩展
107
- $success-color-hover: var(--td-success-color-hover);
108
- $success-color-focus: var(--td-success-color-focus);
109
- $success-color-active: var(--td-success-color-active);
110
- $success-color-disabled: var(--td-success-color-disabled);
111
- $success-color-light: var(--td-success-color-light);
112
- $success-color-light-hover: var(--td-success-color-light-hover);
113
-
114
- // 遮罩
115
- $mask-active: var(--td-mask-active); // 遮罩-弹出
116
- $mask-disabled: var(--td-mask-disabled); // 遮罩-禁用
117
- $mask-bg: var(--td-mask-background); // 二维码遮罩
118
-
119
- // 背景色
120
- $bg-color-page: var(--td-bg-color-page); // 色彩 - page
121
- $bg-color-container: var(--td-bg-color-container); // 色彩 - 容器
122
- $bg-color-container-hover: var(
123
- --td-bg-color-container-hover
124
- ); // 色彩 - 容器 - hover
125
- $bg-color-container-active: var(
126
- --td-bg-color-container-active
127
- ); // 色彩 - 容器 - active
128
- $bg-color-container-select: var(
129
- --td-bg-color-container-select
130
- ); // 色彩 - 容器 - select
131
-
132
- $bg-color-secondarycontainer: var(
133
- --td-bg-color-secondarycontainer
134
- ); // 色彩 - 次级容器
135
- $bg-color-secondarycontainer-hover: var(
136
- --td-bg-color-secondarycontainer-hover
137
- ); // 色彩 - 次级容器 - hover
138
- $bg-color-secondarycontainer-active: var(
139
- --td-bg-color-secondarycontainer-active
140
- ); // 色彩 - 次级容器 - active
141
-
142
- $bg-color-component: var(--td-bg-color-component); // 色彩 - 组件
143
- $bg-color-component-hover: var(
144
- --td-bg-color-component-hover
145
- ); // 色彩 - 组件 - hover
146
- $bg-color-component-active: var(
147
- --td-bg-color-component-active
148
- ); // 色彩 - 组件 - active
149
-
150
- $bg-color-secondarycomponent: var(
151
- --td-bg-color-secondarycomponent
152
- ); // 色彩 - 次级组件
153
- $bg-color-secondarycomponent-hover: var(
154
- --td-bg-color-secondarycomponent-hover
155
- ); // 色彩 - 次级组件 - hover
156
- $bg-color-secondarycomponent-active: var(
157
- --td-bg-color-secondarycomponent-active
158
- ); // 色彩 - 次级组件 - active
159
-
160
- $bg-color-component-disabled: var(
161
- --td-bg-color-component-disabled
162
- ); // 色彩 - 组件 - disabled
163
-
164
- // TODO: 考虑是否在组件内部做判断，不增加额外变量
165
- // 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
166
- $bg-color-specialcomponent: var(--td-bg-color-specialcomponent);
167
-
168
- // 文本颜色
169
- $text-color-primary: var(--td-text-color-primary); // 色彩-文字-主要
170
- $text-color-secondary: var(--td-text-color-secondary); // 色彩-文字-次要
171
- $text-color-placeholder: var(
172
- --td-text-color-placeholder
173
- ); // 色彩-文字-占位符/说明
174
- $text-color-disabled: var(--td-text-color-disabled); // 色彩-文字-禁用
175
- $text-color-anti: var(--td-text-color-anti); // 色彩-文字-反色
176
- $text-color-brand: var(--td-text-color-brand); // 色彩-文字-品牌
177
- $text-color-link: var(--td-text-color-link); // 色彩-文字-链接
178
-
179
- // 分割线
180
- $border-level-1-color: var(--td-border-level-1-color);
181
- $component-stroke: var(--td-component-stroke);
182
- // 边框
183
- $border-level-2-color: var(--td-border-level-2-color);
184
- $component-border: var(--td-component-border);
185
-
186
- // shadow
187
-
188
- // 基础/下层 投影 hover 使用的组件包括：表格 /
189
- $shadow-1: var(--td-shadow-1);
190
- // 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认框 / 选择器 /
191
- $shadow-2: var(--td-shadow-2);
192
- // 上层投影（警示/弹窗）使用的组件包括：全局提示 / 消息通知
193
- $shadow-3: var(--td-shadow-3);
194
-
195
- // 内投影 用于弹窗类组件（气泡确认框 / 全局提示 / 消息通知）的内描边
196
- $shadow-inset-top: var(--td-shadow-inset-top);
197
- $shadow-inset-right: var(--td-shadow-inset-right);
198
- $shadow-inset-bottom: var(--td-shadow-inset-bottom);
199
- $shadow-inset-left: var(--td-shadow-inset-left);
200
- $shadow-inset:
201
- $shadow-inset-top, $shadow-inset-right, $shadow-inset-bottom,
202
- $shadow-inset-left;
203
-
204
- // 融合阴影
205
- $shadow-2-inset: $shadow-2, $shadow-inset;
206
- $shadow-3-inset: $shadow-3, $shadow-inset;
207
-
208
- $size-1: var(--td-size-1);
209
- $size-2: var(--td-size-2);
210
- $size-3: var(--td-size-3);
211
- $size-4: var(--td-size-4);
212
- $size-5: var(--td-size-5);
213
- $size-6: var(--td-size-6);
214
- $size-7: var(--td-size-7);
215
- $size-8: var(--td-size-8);
216
- $size-9: var(--td-size-9);
217
- $size-10: var(--td-size-10);
218
- $size-11: var(--td-size-11);
219
- $size-12: var(--td-size-12);
220
- $size-13: var(--td-size-13);
221
- $size-14: var(--td-size-14);
222
- $size-15: var(--td-size-15);
223
- $size-16: var(--td-size-16);
224
-
225
- // component 组件尺寸高度相关 token
226
- $comp-size-xxxs: var(--td-comp-size-xxxs);
227
- $comp-size-xxs: var(--td-comp-size-xxs);
228
- $comp-size-xs: var(--td-comp-size-xs);
229
- $comp-size-s: var(--td-comp-size-s);
230
- $comp-size-m: var(--td-comp-size-m);
231
- $comp-size-l: var(--td-comp-size-l);
232
- $comp-size-xl: var(--td-comp-size-xl);
233
- $comp-size-xxl: var(--td-comp-size-xxl);
234
- $comp-size-xxxl: var(--td-comp-size-xxxl);
235
- $comp-size-xxxxl: var(--td-comp-size-xxxxl);
236
- $comp-size-xxxxxl: var(--td-comp-size-xxxxxl);
237
-
238
- // popup 弹出层整体边距 token
239
- $pop-padding-s: var(--td-pop-padding-s);
240
- $pop-padding-m: var(--td-pop-padding-m);
241
- $pop-padding-l: var(--td-pop-padding-l);
242
- $pop-padding-xl: var(--td-pop-padding-xl);
243
- $pop-padding-xxl: var(--td-pop-padding-xxl);
244
-
245
- // component 组件左右边距 token
246
- $comp-paddingLR-xxs: var(--td-comp-paddingLR-xxs);
247
- $comp-paddingLR-xs: var(--td-comp-paddingLR-xs);
248
- $comp-paddingLR-s: var(--td-comp-paddingLR-s);
249
- $comp-paddingLR-m: var(--td-comp-paddingLR-m);
250
- $comp-paddingLR-l: var(--td-comp-paddingLR-l);
251
- $comp-paddingLR-xl: var(--td-comp-paddingLR-xl);
252
- $comp-paddingLR-xxl: var(--td-comp-paddingLR-xxl);
253
-
254
- // component 组件上下边距 token
255
- $comp-paddingTB-xxs: var(--td-comp-paddingTB-xxs);
256
- $comp-paddingTB-xs: var(--td-comp-paddingTB-xs);
257
- $comp-paddingTB-s: var(--td-comp-paddingTB-s);
258
- $comp-paddingTB-m: var(--td-comp-paddingTB-m);
259
- $comp-paddingTB-l: var(--td-comp-paddingTB-l);
260
- $comp-paddingTB-xl: var(--td-comp-paddingTB-xl);
261
- $comp-paddingTB-xxl: var(--td-comp-paddingTB-xxl);
262
-
263
- // component 组件间距 token
264
- $comp-margin-xxs: var(--td-comp-margin-xxs);
265
- $comp-margin-xs: var(--td-comp-margin-xs);
266
- $comp-margin-s: var(--td-comp-margin-s);
267
- $comp-margin-m: var(--td-comp-margin-m);
268
- $comp-margin-l: var(--td-comp-margin-l);
269
- $comp-margin-xl: var(--td-comp-margin-xl);
270
- $comp-margin-xxl: var(--td-comp-margin-xxl);
271
- $comp-margin-xxxl: var(--td-comp-margin-xxxl);
272
- $comp-margin-xxxxl: var(--td-comp-margin-xxxxl);
273
-
274
- // Spacer 【deprecated】
275
- $spacer: 8px;
276
- $spacer-s: $spacer * 0.5; // 间距-4
277
- $spacer-m: $spacer * 0.75; // 间距-6
278
- $spacer-l: $spacer * 1.5; // 间距-12
279
- $spacer-1: $spacer; // 间距-8
280
- $spacer-2: $spacer * 2; // 间距-16
281
- $spacer-3: $spacer * 3; // 间距-24
282
- $spacer-4: $spacer * 4; // 间距-32
283
- $spacer-5: $spacer * 5; // 间距-大-40
284
- $spacer-6: $spacer * 6; // 间距-大-48
285
- $spacer-7: $spacer * 7; // 间距-大-48
286
- $spacer-8: $spacer * 8; // 间距-大-48
287
- $spacer-9: $spacer * 9; // 间距-大-48
288
- $spacer-10: $spacer * 10; // 间距-大-80
289
-
290
- $text-line-height-s: var(--td-line-height-body-small);
291
- $text-line-height-base: var(--td-line-height-body-medium);
292
- $text-line-height-l: var(--td-line-height-body-large);
293
- $text-line-height-xl: var(--td-line-height-title-large);
294
- $text-line-height-xxl: var(--td-line-height-headline-large);
295
-
296
- // Font
297
- $font-size: 10px;
298
- $font-size-s: var(--td-font-size-body-small);
299
- $font-size-base: var(--td-font-size-body-medium);
300
- $font-size-l: var(--td-font-size-body-large);
301
- $font-size-xl: var(--td-font-size-title-large);
302
- $font-size-xxl: var(--td-font-size-headline-large);
303
-
304
- $font-family: var(--td-font-family); // 字体-磅数-常规
305
- $font-family-medium: var(--td-font-family-medium); // 字体-磅数-粗体
306
-
307
- // 使用以下与Design Token对应的font token开发组件对应字体、行高
308
- $font-link-small: var(--td-font-link-small);
309
- $font-link-medium: var(--td-font-link-medium);
310
- $font-link-large: var(--td-font-link-large);
311
- $font-mark-small: var(--td-font-mark-small);
312
- $font-mark-medium: var(--td-font-mark-medium);
313
- $font-body-small: var(--td-font-body-small);
314
- $font-body-medium: var(--td-font-body-medium);
315
- $font-body-large: var(--td-font-body-large);
316
- $font-title-small: var(--td-font-title-small);
317
- $font-title-medium: var(--td-font-title-medium);
318
- $font-title-large: var(--td-font-title-large);
319
- $font-title-extraLarge: var(--td-font-title-extraLarge);
320
- $font-headline-small: var(--td-font-headline-small);
321
- $font-headline-medium: var(--td-font-headline-medium);
322
- $font-headline-large: var(--td-font-headline-large);
323
- $font-display-medium: var(--td-font-display-medium);
324
- $font-display-large: var(--td-font-display-large);
325
-
326
- // Border Radius
327
- $border-radius-small: var(--td-radius-small); // 圆角-2
328
- $border-radius-default: var(--td-radius-default); // 圆角-3
329
- $border-radius-medium: var(--td-radius-medium); // 圆角-6
330
- $border-radius-large: var(--td-radius-large); // 圆角-9
331
- $border-radius-extraLarge: var(--td-radius-extraLarge); // 圆角-12
332
- $border-radius-round: var(--td-radius-round); // 圆角-999
333
- $border-radius-circle: var(--td-radius-circle); // 圆角-全圆角
334
-
335
- // 表单相关
336
- $form-height: 30px;
337
- $form-text-color: $text-color-primary;
338
- $form-bg-color: $bg-color-container;
339
- $form-border-color: $border-level-2-color;
340
-
341
- // 图标尺寸
342
- $icon-default: 16px;
343
- $icon-l: 24px;
344
-
345
- // 滚动条颜色
346
- $scrollbar-color: var(--td-scrollbar-color);
347
- // 滚动条悬浮颜色
348
- $scrollbar-hover-color: var(--td-scrollbar-hover-color);
349
- // 滚动条轨道颜色
350
- $scroll-track-color: var(--td-scroll-track-color);
351
-
352
- // 响应式断点
353
- $screen-xs: 320px;
354
- $screen-xs-min: $screen-xs;
355
- $screen-sm: 768px;
356
- $screen-sm-min: $screen-sm;
357
- $screen-md: 992px;
358
- $screen-md-min: $screen-md;
359
- $screen-lg: 1200px;
360
- $screen-lg-min: $screen-lg;
361
- $screen-xl: 1400px;
362
- $screen-xl-min: $screen-xl;
363
- $screen-xxl: 1880px;
364
- $screen-xxl-min: $screen-xxl;
365
-
366
- // 动画
367
- $anim-time-fn-easing: cubic-bezier(0.38, 0, 0.24, 1);
368
- $anim-time-fn-ease-out: cubic-bezier(0, 0, 0.15, 1);
369
- $anim-time-fn-ease-in: cubic-bezier(0.82, 0, 1, 0.9);
370
- $anim-duration-base: 0.2s;
371
- $anim-duration-moderate: 0.24s;
372
- $anim-duration-slow: 0.28s;
373
-
374
- // 统一管理各组件层级关系
375
- $z-index-back-top: 300;
376
- $z-index-affix: 500;
377
- $z-index-drawer: 1500;
378
- $z-index-dialog: 2500;
379
- $z-index-image-viewer: 3000;
380
- $z-index-loading: 3500;
381
- $z-index-message: 5000;
382
- $z-index-Popup: 5500;
383
- $z-index-Tooltip: 5600;
384
- $z-index-Notification: 6000;
385
- $z-index-dragging: 6500;
386
- $z-index-guide: 999999;
1
+ // 公共前缀
2
+ $prefix: t;
3
+
4
+ // 颜色色板
5
+
6
+ $brand-color-1: var(--td-brand-color-1);
7
+ $brand-color-2: var(--td-brand-color-2);
8
+ $brand-color-3: var(--td-brand-color-3);
9
+ $brand-color-4: var(--td-brand-color-4);
10
+ $brand-color-5: var(--td-brand-color-5);
11
+ $brand-color-6: var(--td-brand-color-6);
12
+ $brand-color-7: var(--td-brand-color-7);
13
+ $brand-color-8: var(--td-brand-color-8);
14
+ $brand-color-9: var(--td-brand-color-9);
15
+ $brand-color-10: var(--td-brand-color-10);
16
+
17
+ $warning-color-1: var(--td-warning-color-1);
18
+ $warning-color-2: var(--td-warning-color-2);
19
+ $warning-color-3: var(--td-warning-color-3);
20
+ $warning-color-4: var(--td-warning-color-4);
21
+ $warning-color-5: var(--td-warning-color-5);
22
+ $warning-color-6: var(--td-warning-color-6);
23
+ $warning-color-7: var(--td-warning-color-7);
24
+ $warning-color-8: var(--td-warning-color-8);
25
+ $warning-color-9: var(--td-warning-color-9);
26
+ $warning-color-10: var(--td-warning-color-10);
27
+
28
+ $error-color-1: var(--td-error-color-1);
29
+ $error-color-2: var(--td-error-color-2);
30
+ $error-color-3: var(--td-error-color-3);
31
+ $error-color-4: var(--td-error-color-4);
32
+ $error-color-5: var(--td-error-color-5);
33
+ $error-color-6: var(--td-error-color-6);
34
+ $error-color-7: var(--td-error-color-7);
35
+ $error-color-8: var(--td-error-color-8);
36
+ $error-color-9: var(--td-error-color-9);
37
+ $error-color-10: var(--td-error-color-10);
38
+
39
+ $success-color-1: var(--td-success-color-1);
40
+ $success-color-2: var(--td-success-color-2);
41
+ $success-color-3: var(--td-success-color-3);
42
+ $success-color-4: var(--td-success-color-4);
43
+ $success-color-5: var(--td-success-color-5);
44
+ $success-color-6: var(--td-success-color-6);
45
+ $success-color-7: var(--td-success-color-7);
46
+ $success-color-8: var(--td-success-color-8);
47
+ $success-color-9: var(--td-success-color-9);
48
+ $success-color-10: var(--td-success-color-10);
49
+
50
+ $gray-color-1: var(--td-gray-color-1);
51
+ $gray-color-2: var(--td-gray-color-2);
52
+ $gray-color-3: var(--td-gray-color-3);
53
+ $gray-color-4: var(--td-gray-color-4);
54
+ $gray-color-5: var(--td-gray-color-5);
55
+ $gray-color-6: var(--td-gray-color-6);
56
+ $gray-color-7: var(--td-gray-color-7);
57
+ $gray-color-8: var(--td-gray-color-8);
58
+ $gray-color-9: var(--td-gray-color-9);
59
+ $gray-color-10: var(--td-gray-color-10);
60
+ $gray-color-11: var(--td-gray-color-11);
61
+ $gray-color-12: var(--td-gray-color-12);
62
+ $gray-color-13: var(--td-gray-color-13);
63
+ $gray-color-14: var(--td-gray-color-14);
64
+
65
+ // 文字 & 图标 颜色
66
+ $font-white-1: var(--td-font-white-1);
67
+ $font-white-2: var(--td-font-white-2);
68
+ $font-white-3: var(--td-font-white-3);
69
+ $font-white-4: var(--td-font-white-4);
70
+
71
+ $font-gray-1: var(--td-font-gray-1);
72
+ $font-gray-2: var(--td-font-gray-2);
73
+ $font-gray-3: var(--td-font-gray-3);
74
+ $font-gray-4: var(--td-font-gray-4);
75
+
76
+ // 基础颜色
77
+ $brand-color: var(--td-brand-color); // 色彩-品牌-可操作
78
+ $warning-color: var(--td-warning-color); // 色彩-功能-警告
79
+ $error-color: var(--td-error-color); // 色彩-功能-失败
80
+ $success-color: var(--td-success-color); // 色彩-功能-成功
81
+
82
+ // 基础颜色的扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态
83
+ $brand-color-hover: var(--td-brand-color-hover); // hover态
84
+ $brand-color-focus: var(--td-brand-color-focus); // focus态，包括鼠标和键盘
85
+ $brand-color-active: var(--td-brand-color-active); // 点击态
86
+ $brand-color-disabled: var(--td-brand-color-disabled); // 禁用态
87
+ $brand-color-light: var(--td-brand-color-light); // 浅色的选中态
88
+ $brand-color-light-hover: var(--td-brand-color-light-hover);
89
+
90
+ // 警告色扩展
91
+ $warning-color-hover: var(--td-warning-color-hover);
92
+ $warning-color-focus: var(--td-warning-color-focus);
93
+ $warning-color-active: var(--td-warning-color-active);
94
+ $warning-color-disabled: var(--td-warning-color-disabled);
95
+ $warning-color-light: var(--td-warning-color-light);
96
+ $warning-color-light-hover: var(--td-warning-color-light-hover);
97
+
98
+ // 失败/错误色扩展
99
+ $error-color-hover: var(--td-error-color-hover);
100
+ $error-color-focus: var(--td-error-color-focus);
101
+ $error-color-active: var(--td-error-color-active);
102
+ $error-color-disabled: var(--td-error-color-disabled);
103
+ $error-color-light: var(--td-error-color-light);
104
+ $error-color-light-hover: var(--td-error-color-light-hover);
105
+
106
+ // 成功色扩展
107
+ $success-color-hover: var(--td-success-color-hover);
108
+ $success-color-focus: var(--td-success-color-focus);
109
+ $success-color-active: var(--td-success-color-active);
110
+ $success-color-disabled: var(--td-success-color-disabled);
111
+ $success-color-light: var(--td-success-color-light);
112
+ $success-color-light-hover: var(--td-success-color-light-hover);
113
+
114
+ // 遮罩
115
+ $mask-active: var(--td-mask-active); // 遮罩-弹出
116
+ $mask-disabled: var(--td-mask-disabled); // 遮罩-禁用
117
+ $mask-bg: var(--td-mask-background); // 二维码遮罩
118
+
119
+ // 背景色
120
+ $bg-color-page: var(--td-bg-color-page); // 色彩 - page
121
+ $bg-color-container: var(--td-bg-color-container); // 色彩 - 容器
122
+ $bg-color-container-hover: var(--td-bg-color-container-hover); // 色彩 - 容器 - hover
123
+ $bg-color-container-active: var(--td-bg-color-container-active); // 色彩 - 容器 - active
124
+ $bg-color-container-select: var(--td-bg-color-container-select); // 色彩 - 容器 - select
125
+
126
+ $bg-color-secondarycontainer: var(--td-bg-color-secondarycontainer); // 色彩 - 次级容器
127
+ $bg-color-secondarycontainer-hover: var(--td-bg-color-secondarycontainer-hover); // 色彩 - 次级容器 - hover
128
+ $bg-color-secondarycontainer-active: var(--td-bg-color-secondarycontainer-active); // 色彩 - 次级容器 - active
129
+
130
+ $bg-color-component: var(--td-bg-color-component); // 色彩 - 组件
131
+ $bg-color-component-hover: var(--td-bg-color-component-hover); // 色彩 - 组件 - hover
132
+ $bg-color-component-active: var(--td-bg-color-component-active); // 色彩 - 组件 - active
133
+
134
+ $bg-color-secondarycomponent: var(--td-bg-color-secondarycomponent); // 色彩 - 次级组件
135
+ $bg-color-secondarycomponent-hover: var(--td-bg-color-secondarycomponent-hover); // 色彩 - 次级组件 - hover
136
+ $bg-color-secondarycomponent-active: var(--td-bg-color-secondarycomponent-active); // 色彩 - 次级组件 - active
137
+
138
+ $bg-color-component-disabled: var(--td-bg-color-component-disabled); // 色彩 - 组件 - disabled
139
+
140
+ // TODO: 考虑是否在组件内部做判断，不增加额外变量
141
+ // 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
142
+ $bg-color-specialcomponent: var(--td-bg-color-specialcomponent);
143
+
144
+ // 文本颜色
145
+ $text-color-primary: var(--td-text-color-primary); // 色彩-文字-主要
146
+ $text-color-secondary: var(--td-text-color-secondary); // 色彩-文字-次要
147
+ $text-color-placeholder: var(--td-text-color-placeholder); // 色彩-文字-占位符/说明
148
+ $text-color-disabled: var(--td-text-color-disabled); // 色彩-文字-禁用
149
+ $text-color-anti: var(--td-text-color-anti); // 色彩-文字-反色
150
+ $text-color-brand: var(--td-text-color-brand); // 色彩-文字-品牌
151
+ $text-color-link: var(--td-text-color-link); // 色彩-文字-链接
152
+
153
+ // 分割线
154
+ $border-level-1-color: var(--td-border-level-1-color);
155
+ $component-stroke: var(--td-component-stroke);
156
+ // 边框
157
+ $border-level-2-color: var(--td-border-level-2-color);
158
+ $component-border: var(--td-component-border);
159
+
160
+ // shadow
161
+
162
+ // 基础/下层 投影 hover 使用的组件包括：表格 /
163
+ $shadow-1: var(--td-shadow-1);
164
+ // 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认框 / 选择器 /
165
+ $shadow-2: var(--td-shadow-2);
166
+ // 上层投影（警示/弹窗）使用的组件包括：全局提示 / 消息通知
167
+ $shadow-3: var(--td-shadow-3);
168
+
169
+ // 内投影 用于弹窗类组件（气泡确认框 / 全局提示 / 消息通知）的内描边
170
+ $shadow-inset-top: var(--td-shadow-inset-top);
171
+ $shadow-inset-right: var(--td-shadow-inset-right);
172
+ $shadow-inset-bottom: var(--td-shadow-inset-bottom);
173
+ $shadow-inset-left: var(--td-shadow-inset-left);
174
+ $shadow-inset: $shadow-inset-top, $shadow-inset-right, $shadow-inset-bottom, $shadow-inset-left;
175
+
176
+ // 融合阴影
177
+ $shadow-2-inset: $shadow-2, $shadow-inset;
178
+ $shadow-3-inset: $shadow-3, $shadow-inset;
179
+
180
+ $size-1: var(--td-size-1);
181
+ $size-2: var(--td-size-2);
182
+ $size-3: var(--td-size-3);
183
+ $size-4: var(--td-size-4);
184
+ $size-5: var(--td-size-5);
185
+ $size-6: var(--td-size-6);
186
+ $size-7: var(--td-size-7);
187
+ $size-8: var(--td-size-8);
188
+ $size-9: var(--td-size-9);
189
+ $size-10: var(--td-size-10);
190
+ $size-11: var(--td-size-11);
191
+ $size-12: var(--td-size-12);
192
+ $size-13: var(--td-size-13);
193
+ $size-14: var(--td-size-14);
194
+ $size-15: var(--td-size-15);
195
+ $size-16: var(--td-size-16);
196
+
197
+ // component 组件尺寸高度相关 token
198
+ $comp-size-xxxs: var(--td-comp-size-xxxs);
199
+ $comp-size-xxs: var(--td-comp-size-xxs);
200
+ $comp-size-xs: var(--td-comp-size-xs);
201
+ $comp-size-s: var(--td-comp-size-s);
202
+ $comp-size-m: var(--td-comp-size-m);
203
+ $comp-size-l: var(--td-comp-size-l);
204
+ $comp-size-xl: var(--td-comp-size-xl);
205
+ $comp-size-xxl: var(--td-comp-size-xxl);
206
+ $comp-size-xxxl: var(--td-comp-size-xxxl);
207
+ $comp-size-xxxxl: var(--td-comp-size-xxxxl);
208
+ $comp-size-xxxxxl: var(--td-comp-size-xxxxxl);
209
+
210
+ // popup 弹出层整体边距 token
211
+ $pop-padding-s: var(--td-pop-padding-s);
212
+ $pop-padding-m: var(--td-pop-padding-m);
213
+ $pop-padding-l: var(--td-pop-padding-l);
214
+ $pop-padding-xl: var(--td-pop-padding-xl);
215
+ $pop-padding-xxl: var(--td-pop-padding-xxl);
216
+
217
+ // component 组件左右边距 token
218
+ $comp-paddingLR-xxs: var(--td-comp-paddingLR-xxs);
219
+ $comp-paddingLR-xs: var(--td-comp-paddingLR-xs);
220
+ $comp-paddingLR-s: var(--td-comp-paddingLR-s);
221
+ $comp-paddingLR-m: var(--td-comp-paddingLR-m);
222
+ $comp-paddingLR-l: var(--td-comp-paddingLR-l);
223
+ $comp-paddingLR-xl: var(--td-comp-paddingLR-xl);
224
+ $comp-paddingLR-xxl: var(--td-comp-paddingLR-xxl);
225
+
226
+ // component 组件上下边距 token
227
+ $comp-paddingTB-xxs: var(--td-comp-paddingTB-xxs);
228
+ $comp-paddingTB-xs: var(--td-comp-paddingTB-xs);
229
+ $comp-paddingTB-s: var(--td-comp-paddingTB-s);
230
+ $comp-paddingTB-m: var(--td-comp-paddingTB-m);
231
+ $comp-paddingTB-l: var(--td-comp-paddingTB-l);
232
+ $comp-paddingTB-xl: var(--td-comp-paddingTB-xl);
233
+ $comp-paddingTB-xxl: var(--td-comp-paddingTB-xxl);
234
+
235
+ // component 组件间距 token
236
+ $comp-margin-xxs: var(--td-comp-margin-xxs);
237
+ $comp-margin-xs: var(--td-comp-margin-xs);
238
+ $comp-margin-s: var(--td-comp-margin-s);
239
+ $comp-margin-m: var(--td-comp-margin-m);
240
+ $comp-margin-l: var(--td-comp-margin-l);
241
+ $comp-margin-xl: var(--td-comp-margin-xl);
242
+ $comp-margin-xxl: var(--td-comp-margin-xxl);
243
+ $comp-margin-xxxl: var(--td-comp-margin-xxxl);
244
+ $comp-margin-xxxxl: var(--td-comp-margin-xxxxl);
245
+
246
+ // Spacer 【deprecated】
247
+ $spacer: 8px;
248
+ $spacer-s: $spacer * 0.5; // 间距-4
249
+ $spacer-m: $spacer * 0.75; // 间距-6
250
+ $spacer-l: $spacer * 1.5; // 间距-12
251
+ $spacer-1: $spacer; // 间距-8
252
+ $spacer-2: $spacer * 2; // 间距-16
253
+ $spacer-3: $spacer * 3; // 间距-24
254
+ $spacer-4: $spacer * 4; // 间距-32
255
+ $spacer-5: $spacer * 5; // 间距-大-40
256
+ $spacer-6: $spacer * 6; // 间距-大-48
257
+ $spacer-7: $spacer * 7; // 间距-大-48
258
+ $spacer-8: $spacer * 8; // 间距-大-48
259
+ $spacer-9: $spacer * 9; // 间距-大-48
260
+ $spacer-10: $spacer * 10; // 间距-大-80
261
+
262
+ $text-line-height-s: var(--td-line-height-body-small);
263
+ $text-line-height-base: var(--td-line-height-body-medium);
264
+ $text-line-height-l: var(--td-line-height-body-large);
265
+ $text-line-height-xl: var(--td-line-height-title-large);
266
+ $text-line-height-xxl: var(--td-line-height-headline-large);
267
+
268
+ // Font
269
+ $font-size: 10px;
270
+ $font-size-s: var(--td-font-size-body-small);
271
+ $font-size-base: var(--td-font-size-body-medium);
272
+ $font-size-l: var(--td-font-size-body-large);
273
+ $font-size-xl: var(--td-font-size-title-large);
274
+ $font-size-xxl: var(--td-font-size-headline-large);
275
+
276
+ $font-family: var(--td-font-family); // 字体-磅数-常规
277
+ $font-family-medium: var(--td-font-family-medium); // 字体-磅数-粗体
278
+
279
+ // 使用以下与Design Token对应的font token开发组件对应字体、行高
280
+ $font-link-small: var(--td-font-link-small);
281
+ $font-link-medium: var(--td-font-link-medium);
282
+ $font-link-large: var(--td-font-link-large);
283
+ $font-mark-small: var(--td-font-mark-small);
284
+ $font-mark-medium: var(--td-font-mark-medium);
285
+ $font-body-small: var(--td-font-body-small);
286
+ $font-body-medium: var(--td-font-body-medium);
287
+ $font-body-large: var(--td-font-body-large);
288
+ $font-title-small: var(--td-font-title-small);
289
+ $font-title-medium: var(--td-font-title-medium);
290
+ $font-title-large: var(--td-font-title-large);
291
+ $font-title-extraLarge: var(--td-font-title-extraLarge);
292
+ $font-headline-small: var(--td-font-headline-small);
293
+ $font-headline-medium: var(--td-font-headline-medium);
294
+ $font-headline-large: var(--td-font-headline-large);
295
+ $font-display-medium: var(--td-font-display-medium);
296
+ $font-display-large: var(--td-font-display-large);
297
+
298
+ // Border Radius
299
+ $border-radius-small: var(--td-radius-small); // 圆角-2
300
+ $border-radius-default: var(--td-radius-default); // 圆角-3
301
+ $border-radius-medium: var(--td-radius-medium); // 圆角-6
302
+ $border-radius-large: var(--td-radius-large); // 圆角-9
303
+ $border-radius-extraLarge: var(--td-radius-extraLarge); // 圆角-12
304
+ $border-radius-round: var(--td-radius-round); // 圆角-999
305
+ $border-radius-circle: var(--td-radius-circle); // 圆角-全圆角
306
+
307
+ // 表单相关
308
+ $form-height: 30px;
309
+ $form-text-color: $text-color-primary;
310
+ $form-bg-color: $bg-color-container;
311
+ $form-border-color: $border-level-2-color;
312
+
313
+ // 图标尺寸
314
+ $icon-default: 16px;
315
+ $icon-l: 24px;
316
+
317
+ // 滚动条颜色
318
+ $scrollbar-color: var(--td-scrollbar-color);
319
+ // 滚动条悬浮颜色
320
+ $scrollbar-hover-color: var(--td-scrollbar-hover-color);
321
+ // 滚动条轨道颜色
322
+ $scroll-track-color: var(--td-scroll-track-color);
323
+
324
+ // 响应式断点
325
+ $screen-xs: 320px;
326
+ $screen-xs-min: $screen-xs;
327
+ $screen-sm: 768px;
328
+ $screen-sm-min: $screen-sm;
329
+ $screen-md: 992px;
330
+ $screen-md-min: $screen-md;
331
+ $screen-lg: 1200px;
332
+ $screen-lg-min: $screen-lg;
333
+ $screen-xl: 1400px;
334
+ $screen-xl-min: $screen-xl;
335
+ $screen-xxl: 1880px;
336
+ $screen-xxl-min: $screen-xxl;
337
+
338
+ // 动画
339
+ $anim-time-fn-easing: cubic-bezier(0.38, 0, 0.24, 1);
340
+ $anim-time-fn-ease-out: cubic-bezier(0, 0, 0.15, 1);
341
+ $anim-time-fn-ease-in: cubic-bezier(0.82, 0, 1, 0.9);
342
+ $anim-duration-base: 0.2s;
343
+ $anim-duration-moderate: 0.24s;
344
+ $anim-duration-slow: 0.28s;
345
+
346
+ // 统一管理各组件层级关系
347
+ $z-index-back-top: 300;
348
+ $z-index-affix: 500;
349
+ $z-index-drawer: 1500;
350
+ $z-index-dialog: 2500;
351
+ $z-index-image-viewer: 3000;
352
+ $z-index-loading: 3500;
353
+ $z-index-message: 5000;
354
+ $z-index-Popup: 5500;
355
+ $z-index-Tooltip: 5600;
356
+ $z-index-Notification: 6000;
357
+ $z-index-dragging: 6500;
358
+ $z-index-guide: 999999;