npm - @tendaui/components - Versions diffs - 1.2.4 → 1.3.0 - Mend

@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

package/LICENSE +21 -21
package/README.md +176 -176
package/_util/scroll.ts +9 -0
package/alert/_example/base.tsx +13 -0
package/alert/_example/collapse.tsx +15 -0
package/badge/_example/base.tsx +10 -0
package/badge/_example/count.tsx +29 -0
package/badge/_example/custom-color.tsx +32 -0
package/badge/_example/dot.tsx +26 -0
package/badge/_example/max-count.tsx +26 -0
package/badge/_example/offset.tsx +29 -0
package/badge/_example/shape.tsx +32 -0
package/badge/_example/show-zero.tsx +23 -0
package/badge/_example/size.tsx +35 -0
package/badge/_example/standalone.tsx +14 -0
package/badge/_example/text-count.tsx +26 -0
package/badge/_example/with-button.tsx +23 -0
package/button/_example/block.tsx +18 -0
package/button/_example/disabled.tsx +22 -0
package/button/_example/ghost.tsx +24 -0
package/button/_example/link.tsx +15 -0
package/button/_example/loading.tsx +19 -0
package/button/_example/shape.tsx +18 -0
package/button/_example/size.tsx +18 -0
package/button/_example/suffix.tsx +16 -0
package/button/_example/theme.tsx +14 -0
package/button/_example/variant-base.tsx +24 -0
package/button/_example/variant-dashed.tsx +24 -0
package/button/_example/variant-outline.tsx +24 -0
package/button/_example/variant-text.tsx +24 -0
package/checkbox/_example/base.tsx +8 -0
package/checkbox/_example/controlled.tsx +11 -0
package/checkbox/_example/group-disabled.tsx +13 -0
package/checkbox/_example/group-with-check-all.tsx +22 -0
package/checkbox/_example/group-with-max.tsx +17 -0
package/checkbox/_example/group-with-options.tsx +18 -0
package/checkbox/_example/group.tsx +17 -0
package/checkbox/_example/states.tsx +19 -0
package/color-picker/ColorPicker.tsx +16 -2
package/color-picker/_example/base.tsx +12 -0
package/color-picker/_example/borderless.tsx +17 -0
package/color-picker/_example/clearable.tsx +12 -0
package/color-picker/_example/disabled.tsx +17 -0
package/color-picker/_example/formats.tsx +30 -0
package/color-picker/_example/manual-input.tsx +39 -0
package/color-picker/_example/recent-colors.tsx +19 -0
package/color-picker/_example/swatch-colors.tsx +28 -0
package/color-picker/_example/with-alpha.tsx +21 -0
package/color-picker/components/panel/format/inputs.tsx +1 -1
package/color-picker/components/panel/index.tsx +13 -0
package/color-picker/components/trigger.tsx +64 -13
package/color-picker/defaultProps.ts +4 -1
package/color-picker/utils/color-picker/cmyk.ts +89 -89
package/color-picker/utils/color-picker/color.ts +467 -467
package/color-picker/utils/color-picker/constants.ts +187 -187
package/color-picker/utils/color-picker/draggable.ts +99 -100
package/color-picker/utils/color-picker/format.ts +90 -95
package/color-picker/utils/color-picker/gradient.ts +237 -243
package/color-picker/utils/color-picker/index.ts +7 -7
package/color-picker/utils/color-picker/types.ts +33 -33
package/config-provider/ConfigContext.tsx +1 -0
package/config-provider/ConfigProvider.tsx +18 -1
package/config-provider/type.ts +5 -0
package/dialog/_example/base.tsx +27 -0
package/dialog/_example/confirm-loading.tsx +32 -0
package/dialog/_example/custom-buttons.tsx +24 -0
package/dialog/_example/full-screen.tsx +26 -0
package/dialog/_example/hide-buttons.tsx +39 -0
package/dialog/_example/modeless.tsx +25 -0
package/dialog/_example/placement.tsx +40 -0
package/dialog/_example/plugin-example.tsx +69 -0
package/dialog/_example/themes.tsx +41 -0
package/dialog/hooks/useDialogPosition.ts +35 -35
package/drawer/Drawer.tsx +17 -9
package/drawer/_example/custom-header-footer.tsx +29 -0
package/drawer/_example/default.tsx +20 -0
package/drawer/_example/events.tsx +53 -0
package/drawer/_example/no-footer.tsx +20 -0
package/drawer/_example/no-overlay.tsx +20 -0
package/drawer/_example/placement.tsx +43 -0
package/drawer/_example/size-draggable.tsx +26 -0
package/drawer/_example/size.tsx +40 -0
package/drawer/defaultProps.ts +1 -1
package/fireworks/Fireworks.tsx +1 -10
package/fireworks/index.ts +0 -1
package/fireworks/type.ts +0 -1
package/form/_example/complex.tsx +76 -0
package/form/_example/default.tsx +58 -0
package/form/_example/disabled.tsx +26 -0
package/form/_example/form-list.tsx +74 -0
package/form/_example/inline-layout.tsx +20 -0
package/form/_example/label-align.tsx +46 -0
package/form/_example/methods.tsx +66 -0
package/form/_example/validation.tsx +71 -0
package/form/hooks/useFormItemStyle.tsx +19 -7
package/form/index.ts +20 -2
package/form/type.ts +519 -519
package/global-config/default-config.ts +95 -95
package/global-config/locale/ar_KW.ts +259 -270
package/global-config/locale/en_US.ts +265 -280
package/global-config/locale/it_IT.ts +264 -287
package/global-config/locale/ja_JP.ts +264 -279
package/global-config/locale/ko_KR.ts +264 -279
package/global-config/locale/ru_RU.ts +277 -288
package/global-config/locale/zh_CN.ts +265 -279
package/global-config/locale/zh_TW.ts +265 -279
package/global-config/mobile/default-config.ts +6 -6
package/global-config/mobile/locale/ar_KW.ts +112 -113
package/global-config/mobile/locale/en_US.ts +113 -114
package/global-config/mobile/locale/it_IT.ts +113 -114
package/global-config/mobile/locale/ja_JP.ts +100 -101
package/global-config/mobile/locale/ko_KR.ts +100 -101
package/global-config/mobile/locale/ru_RU.ts +112 -113
package/global-config/mobile/locale/zh_CN.ts +100 -101
package/global-config/mobile/locale/zh_TW.ts +100 -101
package/global-config/t.ts +111 -111
package/hooks/useDebounce.ts +27 -0
package/hooks/useLastest.ts +6 -2
package/hooks/useResizeObserve.ts +0 -1
package/index.ts +1 -1
package/input/Input.tsx +53 -10
package/input/_example/auto-width.tsx +14 -0
package/input/_example/borderless.tsx +17 -0
package/input/_example/clearable.tsx +14 -0
package/input/_example/default.tsx +10 -0
package/input/_example/disabled-readonly.tsx +12 -0
package/input/_example/events.tsx +42 -0
package/input/_example/group.tsx +14 -0
package/input/_example/label-suffix.tsx +12 -0
package/input/_example/max-length.tsx +11 -0
package/input/_example/password.tsx +14 -0
package/input/_example/sizes.tsx +12 -0
package/input/_example/status.tsx +13 -0
package/input/_example/text-align.tsx +12 -0
package/input/_example/with-icon.tsx +13 -0
package/input/type.ts +3 -0
package/input/useLengthLimit.ts +122 -0
package/input-number/InputNumber.tsx +124 -124
package/input-number/_example/align.tsx +23 -0
package/input-number/_example/auto-width.tsx +8 -0
package/input-number/_example/default.tsx +8 -0
package/input-number/_example/events.tsx +45 -0
package/input-number/_example/format.tsx +27 -0
package/input-number/_example/large-number.tsx +17 -0
package/input-number/_example/min-max.tsx +14 -0
package/input-number/_example/sizes.tsx +35 -0
package/input-number/_example/status.tsx +65 -0
package/input-number/_example/step-and-decimal.tsx +14 -0
package/input-number/_example/themes.tsx +21 -0
package/input-number/_example/with-suffix.tsx +12 -0
package/input-number/defaultProps.ts +17 -17
package/input-number/index.ts +9 -9
package/input-number/style/css.js +1 -1
package/input-number/style/index.js +1 -1
package/input-number/useInputNumber.tsx +270 -270
package/ip-input/_example/controlled.tsx +26 -0
package/ip-input/_example/default.tsx +12 -0
package/ip-input/_example/full-featured.tsx +32 -0
package/ip-input/_example/ipv6.tsx +23 -0
package/ip-input/_example/keyboard-navigation.tsx +19 -0
package/ip-input/_example/paste-demo.tsx +23 -0
package/ip-input/_example/states.tsx +21 -0
package/ip-input/_example/with-cidr.tsx +23 -0
package/layout/_example/combine-left.tsx +54 -0
package/layout/_example/combine-right.tsx +54 -0
package/layout/_example/custom-aside-width.tsx +56 -0
package/layout/_example/custom-height.tsx +45 -0
package/layout/_example/double-sidebar.tsx +57 -0
package/layout/_example/side-navigation-right.tsx +51 -0
package/layout/_example/side-navigation.tsx +51 -0
package/layout/_example/top-navigation.tsx +41 -0
package/list/ListItem.tsx +36 -36
package/list/ListItemMeta.tsx +40 -40
package/list/_example/async-loading.tsx +46 -0
package/list/_example/default.tsx +23 -0
package/list/_example/header-footer.tsx +40 -0
package/list/_example/multiline.tsx +24 -0
package/list/_example/scroll-loading.tsx +69 -0
package/list/_example/sizes.tsx +45 -0
package/list/_example/split.tsx +36 -0
package/list/_example/stripe.tsx +24 -0
package/list/_example/virtual-scroll.tsx +51 -0
package/list/_example/with-image.tsx +26 -0
package/list/defaultProps.ts +11 -11
package/list/hooks/useListVirtualScroll.ts +82 -82
package/list/style/css.js +1 -1
package/list/style/index.js +1 -1
package/loading/_example/default.tsx +6 -0
package/loading/_example/delay.tsx +53 -0
package/loading/_example/fullscreen.tsx +29 -0
package/loading/_example/inherit-color.tsx +24 -0
package/loading/_example/no-overlay.tsx +15 -0
package/loading/_example/sizes.tsx +25 -0
package/loading/_example/with-text.tsx +12 -0
package/loading/_example/wrapper.tsx +30 -0
package/locale/LocalReceiver.ts +55 -55
package/locale/ar_KW.ts +7 -7
package/locale/en_US.ts +7 -7
package/locale/it_IT.ts +6 -6
package/locale/ja_JP.ts +6 -6
package/locale/ko_KR.ts +6 -6
package/locale/ru_RU.ts +6 -6
package/locale/zh_CN.ts +5 -5
package/locale/zh_TW.ts +7 -7
package/notification/_example/default.tsx +31 -0
package/notification/_example/long-content.tsx +37 -0
package/notification/_example/stacking.tsx +40 -0
package/notification/_example/types.tsx +78 -0
package/notification/_example/usage-example.tsx +62 -0
package/package.json +4 -3
package/popup/Popup.tsx +17 -5
package/popup/_example/controlled.tsx +32 -0
package/popup/_example/custom-content.tsx +64 -0
package/popup/_example/default.tsx +19 -0
package/popup/_example/delay.tsx +35 -0
package/popup/_example/disabled.tsx +17 -0
package/popup/_example/no-arrow.tsx +17 -0
package/popup/_example/placements.tsx +61 -0
package/popup/_example/triggers.tsx +26 -0
package/radio/_example/allow-uncheck.tsx +19 -0
package/radio/_example/button-style.tsx +40 -0
package/radio/_example/controlled.tsx +13 -0
package/radio/_example/default.tsx +13 -0
package/radio/_example/group-disabled.tsx +22 -0
package/radio/_example/group-with-options.tsx +20 -0
package/radio/_example/group.tsx +19 -0
package/radio/_example/sizes.tsx +37 -0
package/radio/_example/states.tsx +20 -0
package/select/_example/collapsed.tsx +30 -0
package/select/_example/creatable.tsx +36 -0
package/select/_example/custom-content.tsx +26 -0
package/select/_example/default.tsx +29 -0
package/select/_example/disabled.tsx +20 -0
package/select/_example/filterable.tsx +27 -0
package/select/_example/group-options.tsx +44 -0
package/select/_example/label-suffix.tsx +24 -0
package/select/_example/loading.tsx +19 -0
package/select/_example/multiple.tsx +31 -0
package/select/_example/sizes.tsx +20 -0
package/select/_example/status.tsx +27 -0
package/select/type.ts +382 -382
package/select-input/type.ts +280 -280
package/slider/Slider.tsx +13 -5
package/slider/SliderHandleButton.tsx +50 -50
package/slider/_example/custom-label.tsx +19 -0
package/slider/_example/default.tsx +14 -0
package/slider/_example/disabled.tsx +17 -0
package/slider/_example/marks.tsx +31 -0
package/slider/_example/range.tsx +16 -0
package/slider/_example/step.tsx +14 -0
package/slider/_example/vertical.tsx +26 -0
package/slider/_example/with-input-number.tsx +21 -0
package/slider/defaultProps.ts +15 -15
package/slider/style/css.js +1 -1
package/slider/style/index.js +1 -1
package/slider/type.ts +1 -1
package/styles/_global.scss +40 -40
package/styles/_vars.scss +374 -358
package/styles/components/alert/_index.scss +175 -175
package/styles/components/alert/_vars.scss +41 -41
package/styles/components/badge/_index.scss +71 -71
package/styles/components/badge/_vars.scss +26 -26
package/styles/components/button/_index.scss +499 -499
package/styles/components/button/_mixins.scss +40 -40
package/styles/components/button/_vars.scss +121 -121
package/styles/components/checkbox/_index.scss +158 -158
package/styles/components/checkbox/_var.scss +59 -59
package/styles/components/color-picker/_index.scss +586 -586
package/styles/components/color-picker/_vars.scss +79 -79
package/styles/components/dialog/_animate.scss +133 -133
package/styles/components/dialog/_index.scss +310 -312
package/styles/components/dialog/_vars.scss +60 -60
package/styles/components/drawer/_index.scss +206 -205
package/styles/components/drawer/_var.scss +55 -55
package/styles/components/fireworks/_index.scss +86 -86
package/styles/components/fireworks/_vars.scss +5 -5
package/styles/components/form/_index.scss +175 -174
package/styles/components/form/_mixins.scss +74 -74
package/styles/components/form/_vars.scss +101 -101
package/styles/components/input/_index.scss +350 -350
package/styles/components/input/_mixins.scss +120 -118
package/styles/components/input/_vars.scss +130 -130
package/styles/components/input-number/_index.scss +340 -339
package/styles/components/input-number/_vars.scss +56 -56
package/styles/components/ip-input/_index.scss +277 -277
package/styles/components/layout/_index.scss +47 -47
package/styles/components/layout/_vars.scss +19 -19
package/styles/components/layout/doc.scss +74 -74
package/styles/components/list/_index.scss +172 -172
package/styles/components/list/_vars.scss +42 -42
package/styles/components/loading/_index.scss +113 -113
package/styles/components/loading/_vars.scss +40 -40
package/styles/components/notification/_index.scss +144 -144
package/styles/components/notification/_mixins.scss +13 -13
package/styles/components/notification/_vars.scss +60 -60
package/styles/components/popup/_index.scss +78 -78
package/styles/components/popup/_mixin.scss +149 -149
package/styles/components/popup/_vars.scss +33 -33
package/styles/components/radio/_index.scss +376 -376
package/styles/components/radio/_vars.scss +89 -89
package/styles/components/select/_index.scss +291 -291
package/styles/components/select/_var.scss +64 -64
package/styles/components/select-input/_index.scss +5 -5
package/styles/components/select-input/_var.scss +4 -4
package/styles/components/slider/_index.scss +241 -241
package/styles/components/slider/_vars.scss +51 -51
package/styles/components/switch/_index.scss +248 -165
package/styles/components/switch/_vars.scss +63 -63
package/styles/components/table/_index.scss +194 -186
package/styles/components/table/_var.scss +52 -52
package/styles/components/tabs/_index.scss +165 -166
package/styles/components/tabs/_mixins.scss +11 -11
package/styles/components/tabs/_vars.scss +72 -72
package/styles/components/tag/_index.scss +317 -317
package/styles/components/tag/_var.scss +86 -86
package/styles/components/tag-input/_index.scss +164 -164
package/styles/components/tag-input/_vars.scss +17 -17
package/styles/components/tooltip/_index.scss +104 -0
package/styles/components/tooltip/_vars.scss +23 -0
package/styles/mixins/_focus.scss +8 -8
package/styles/mixins/_layout.scss +32 -32
package/styles/mixins/_reset.scss +11 -11
package/styles/mixins/_scrollbar.scss +32 -32
package/styles/mixins/_text.scss +50 -50
package/styles/themes/_dark.scss +169 -169
package/styles/themes/_font.scss +69 -69
package/styles/themes/_index.scss +5 -5
package/styles/themes/_light.scss +170 -170
package/styles/themes/_radius.scss +9 -9
package/styles/themes/_size.scss +68 -68
package/styles/utilities/_animation.scss +58 -58
package/styles/utilities/_tips.scss +10 -10
package/switch/_example/async-change.tsx +25 -0
package/switch/_example/before-change.tsx +22 -0
package/switch/_example/controlled.tsx +14 -0
package/switch/_example/custom-value.tsx +21 -0
package/switch/_example/default.tsx +6 -0
package/switch/_example/disabled.tsx +25 -0
package/switch/_example/loading.tsx +17 -0
package/switch/_example/sizes.tsx +21 -0
package/switch/_example/with-label.tsx +21 -0
package/tab/TabPanel.tsx +9 -6
package/tab/_example/addable.tsx +45 -0
package/tab/_example/card-theme.tsx +22 -0
package/tab/_example/default.tsx +22 -0
package/tab/_example/disabled.tsx +38 -0
package/tab/_example/lazy.tsx +25 -0
package/tab/_example/placement.tsx +36 -0
package/tab/_example/removable.tsx +31 -0
package/tab/_example/sizes.tsx +31 -0
package/tab/_example/with-action.tsx +26 -0
package/table/Cell.tsx +3 -6
package/table/Ellipsis.tsx +73 -0
package/table/_example/alignment.tsx +46 -0
package/table/_example/auto-width.tsx +47 -0
package/table/_example/bordered-stripe-hover.tsx +42 -0
package/table/_example/bordered.tsx +42 -0
package/table/_example/cell-click.tsx +52 -0
package/table/_example/complex.tsx +82 -0
package/table/_example/custom-cell.tsx +68 -0
package/table/_example/custom-empty.tsx +37 -0
package/table/_example/custom-row-class-name.tsx +57 -0
package/table/_example/default.tsx +42 -0
package/table/_example/ellipsis.tsx +56 -0
package/table/_example/empty.tsx +28 -0
package/table/_example/fixed-width.tsx +48 -0
package/table/_example/hover.tsx +42 -0
package/table/_example/row-click.tsx +52 -0
package/table/_example/sizes.tsx +57 -0
package/table/_example/stripe.tsx +42 -0
package/table/_example/vertical-align.tsx +110 -0
package/table/hooks/useTableClassName.ts +3 -3
package/table/index.ts +2 -0
package/table/type.ts +1 -0
package/tag/Tag.tsx +1 -1
package/tag/_example/closable.tsx +44 -0
package/tag/_example/default.tsx +17 -0
package/tag/_example/disabled.tsx +19 -0
package/tag/_example/sizes.tsx +18 -0
package/tag/_example/variants.tsx +37 -0
package/tag-input/_example/collapsed.tsx +27 -0
package/tag-input/_example/controlled-uncontrolled.tsx +26 -0
package/tag-input/_example/default.tsx +15 -0
package/tag-input/_example/disabled-readonly.tsx +21 -0
package/tag-input/_example/events.tsx +64 -0
package/tag-input/_example/excess-display.tsx +27 -0
package/tag-input/_example/max-tags.tsx +22 -0
package/tag-input/_example/sizes.tsx +21 -0
package/tag-input/_example/status.tsx +37 -0
package/tag-input/_example/with-label.tsx +23 -0
package/tag-input/hooks/useTagList.tsx +1 -1
package/tooltip/Tooltip.tsx +76 -0
package/tooltip/_example/base.tsx +26 -0
package/tooltip/_example/custom-content.tsx +47 -0
package/tooltip/_example/placement.tsx +33 -0
package/tooltip/_example/theme.tsx +34 -0
package/tooltip/defaultProps.ts +14 -0
package/tooltip/index.ts +7 -0
package/tooltip/style/index.js +1 -0
package/tooltip/type.ts +99 -0
package/utils/input-number/large-number.ts +423 -423
package/utils/input-number/number.ts +257 -257
package/utils/log/index.ts +3 -3
package/utils/log/log.ts +29 -30
package/utils/log/types.ts +9 -12
package/utils/style.ts +58 -58

package/styles/_vars.scss CHANGED Viewed

@@ -1,358 +1,374 @@
-// 公共前缀
-$prefix: t;
-// 颜色色板
-$brand-color-1: var(--td-brand-color-1);
-$brand-color-2: var(--td-brand-color-2);
-$brand-color-3: var(--td-brand-color-3);
-$brand-color-4: var(--td-brand-color-4);
-$brand-color-5: var(--td-brand-color-5);
-$brand-color-6: var(--td-brand-color-6);
-$brand-color-7: var(--td-brand-color-7);
-$brand-color-8: var(--td-brand-color-8);
-$brand-color-9: var(--td-brand-color-9);
-$brand-color-10: var(--td-brand-color-10);
-$warning-color-1: var(--td-warning-color-1);
-$warning-color-2: var(--td-warning-color-2);
-$warning-color-3: var(--td-warning-color-3);
-$warning-color-4: var(--td-warning-color-4);
-$warning-color-5: var(--td-warning-color-5);
-$warning-color-6: var(--td-warning-color-6);
-$warning-color-7: var(--td-warning-color-7);
-$warning-color-8: var(--td-warning-color-8);
-$warning-color-9: var(--td-warning-color-9);
-$warning-color-10: var(--td-warning-color-10);
-$error-color-1: var(--td-error-color-1);
-$error-color-2: var(--td-error-color-2);
-$error-color-3: var(--td-error-color-3);
-$error-color-4: var(--td-error-color-4);
-$error-color-5: var(--td-error-color-5);
-$error-color-6: var(--td-error-color-6);
-$error-color-7: var(--td-error-color-7);
-$error-color-8: var(--td-error-color-8);
-$error-color-9: var(--td-error-color-9);
-$error-color-10: var(--td-error-color-10);
-$success-color-1: var(--td-success-color-1);
-$success-color-2: var(--td-success-color-2);
-$success-color-3: var(--td-success-color-3);
-$success-color-4: var(--td-success-color-4);
-$success-color-5: var(--td-success-color-5);
-$success-color-6: var(--td-success-color-6);
-$success-color-7: var(--td-success-color-7);
-$success-color-8: var(--td-success-color-8);
-$success-color-9: var(--td-success-color-9);
-$success-color-10: var(--td-success-color-10);
-$gray-color-1: var(--td-gray-color-1);
-$gray-color-2: var(--td-gray-color-2);
-$gray-color-3: var(--td-gray-color-3);
-$gray-color-4: var(--td-gray-color-4);
-$gray-color-5: var(--td-gray-color-5);
-$gray-color-6: var(--td-gray-color-6);
-$gray-color-7: var(--td-gray-color-7);
-$gray-color-8: var(--td-gray-color-8);
-$gray-color-9: var(--td-gray-color-9);
-$gray-color-10: var(--td-gray-color-10);
-$gray-color-11: var(--td-gray-color-11);
-$gray-color-12: var(--td-gray-color-12);
-$gray-color-13: var(--td-gray-color-13);
-$gray-color-14: var(--td-gray-color-14);
-// 文字 & 图标 颜色
-$font-white-1: var(--td-font-white-1);
-$font-white-2: var(--td-font-white-2);
-$font-white-3: var(--td-font-white-3);
-$font-white-4: var(--td-font-white-4);
-$font-gray-1: var(--td-font-gray-1);
-$font-gray-2: var(--td-font-gray-2);
-$font-gray-3: var(--td-font-gray-3);
-$font-gray-4: var(--td-font-gray-4);
-// 基础颜色
-$brand-color: var(--td-brand-color); // 色彩-品牌-可操作
-$warning-color: var(--td-warning-color); // 色彩-功能-警告
-$error-color: var(--td-error-color); // 色彩-功能-失败
-$success-color: var(--td-success-color); // 色彩-功能-成功
-// 基础颜色的扩充用于 hover / 聚焦 / 禁用 / 点击 等状态
-$brand-color-hover: var(--td-brand-color-hover); // hover
-$brand-color-focus: var(--td-brand-color-focus); // focus态，包括鼠标和键盘
-$brand-color-active: var(--td-brand-color-active); // 点击
-$brand-color-disabled: var(--td-brand-color-disabled); // 禁用
-$brand-color-light: var(--td-brand-color-light); // 浅色的选中
-$brand-color-light-hover: var(--td-brand-color-light-hover);
-// 警告色扩充
-$warning-color-hover: var(--td-warning-color-hover);
-$warning-color-focus: var(--td-warning-color-focus);
-$warning-color-active: var(--td-warning-color-active);
-$warning-color-disabled: var(--td-warning-color-disabled);
-$warning-color-light: var(--td-warning-color-light);
-$warning-color-light-hover: var(--td-warning-color-light-hover);
-// 失败/错误色扩充
-$error-color-hover: var(--td-error-color-hover);
-$error-color-focus: var(--td-error-color-focus);
-$error-color-active: var(--td-error-color-active);
-$error-color-disabled: var(--td-error-color-disabled);
-$error-color-light: var(--td-error-color-light);
-$error-color-light-hover: var(--td-error-color-light-hover);
-// 成功色扩充
-$success-color-hover: var(--td-success-color-hover);
-$success-color-focus: var(--td-success-color-focus);
-$success-color-active: var(--td-success-color-active);
-$success-color-disabled: var(--td-success-color-disabled);
-$success-color-light: var(--td-success-color-light);
-$success-color-light-hover: var(--td-success-color-light-hover);
-// 遮罩
-$mask-active: var(--td-mask-active); // 遮罩-弹出
-$mask-disabled: var(--td-mask-disabled); // 遮罩-禁用
-$mask-bg: var(--td-mask-background); // 二维码遮罩
-// 背景颜色
-$bg-color-page: var(--td-bg-color-page); // 色彩 - page
-$bg-color-container: var(--td-bg-color-container); // 色彩 - 容器
-$bg-color-container-hover: var(--td-bg-color-container-hover); // 色彩 - 容器 - hover
-$bg-color-container-active: var(--td-bg-color-container-active); // 色彩 - 容器 - active
-$bg-color-container-select: var(--td-bg-color-container-select); // 色彩 - 容器 - select
-$bg-color-secondarycontainer: var(--td-bg-color-secondarycontainer); // 色彩 - 次级容器
-$bg-color-secondarycontainer-hover: var(--td-bg-color-secondarycontainer-hover); // 色彩 - 次级容器 - hover
-$bg-color-secondarycontainer-active: var(--td-bg-color-secondarycontainer-active); // 色彩 - 次级容器 - active
-$bg-color-component: var(--td-bg-color-component); // 色彩  - 组件
-$bg-color-component-hover: var(--td-bg-color-component-hover); // 色彩 - 组件 - hover
-$bg-color-component-active: var(--td-bg-color-component-active); // 色彩 - 组件 - active
-$bg-color-secondarycomponent: var(--td-bg-color-secondarycomponent); // 色彩 - 次级组件
-$bg-color-secondarycomponent-hover: var(--td-bg-color-secondarycomponent-hover); // 色彩 - 次级组件 - hover
-$bg-color-secondarycomponent-active: var(--td-bg-color-secondarycomponent-active); // 色彩 - 次级组件 - active
-$bg-color-component-disabled: var(--td-bg-color-component-disabled); // 色彩 - 组件 - disabled
-// TODO: 考虑是否在组件内部做判断，不增加额外变量
-// 特殊组件背景色，目前只用button、input 组件多主题场景，浅色主题下固定为白色，深色主题下transparent 适配背景颜色
-$bg-color-specialcomponent: var(--td-bg-color-specialcomponent);
-// 文本颜色
-$text-color-primary: var(--td-text-color-primary); // 色彩-文字-主要
-$text-color-secondary: var(--td-text-color-secondary); // 色彩-文字-次要
-$text-color-placeholder: var(--td-text-color-placeholder); // 色彩-文字-占位说明
-$text-color-disabled: var(--td-text-color-disabled); // 色彩-文字-禁用
-$text-color-anti: var(--td-text-color-anti); // 色彩-文字-反色
-$text-color-brand: var(--td-text-color-brand); // 色彩-文字-品牌
-$text-color-link: var(--td-text-color-link); // 色彩-文字-链接
-// 分割线
-$border-level-1-color: var(--td-border-level-1-color);
-$component-stroke: var(--td-component-stroke);
-// 边框
-$border-level-2-color: var(--td-border-level-2-color);
-$component-border: var(--td-component-border);
-// shadow
-// 基础/下层 投影 hover 使用的组件包括：表格
-$shadow-1: var(--td-shadow-1);
-// 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认 / 选择
-$shadow-2: var(--td-shadow-2);
-// 上层投影（警告/弹窗）使用的组件包括：全局提示 / 消息通知
-$shadow-3: var(--td-shadow-3);
-// 内投影用于弹窗类组件（气泡确认 / 全局提示 / 消息通知）的内描影
-$shadow-inset-top: var(--td-shadow-inset-top);
-$shadow-inset-right: var(--td-shadow-inset-right);
-$shadow-inset-bottom: var(--td-shadow-inset-bottom);
-$shadow-inset-left: var(--td-shadow-inset-left);
-$shadow-inset: $shadow-inset-top, $shadow-inset-right, $shadow-inset-bottom, $shadow-inset-left;
-// 融合阴影
-$shadow-2-inset: $shadow-2, $shadow-inset;
-$shadow-3-inset: $shadow-3, $shadow-inset;
-$size-1: var(--td-size-1);
-$size-2: var(--td-size-2);
-$size-3: var(--td-size-3);
-$size-4: var(--td-size-4);
-$size-5: var(--td-size-5);
-$size-6: var(--td-size-6);
-$size-7: var(--td-size-7);
-$size-8: var(--td-size-8);
-$size-9: var(--td-size-9);
-$size-10: var(--td-size-10);
-$size-11: var(--td-size-11);
-$size-12: var(--td-size-12);
-$size-13: var(--td-size-13);
-$size-14: var(--td-size-14);
-$size-15: var(--td-size-15);
-$size-16: var(--td-size-16);
-// component 组件尺寸高度相关 token
-$comp-size-xxxs: var(--td-comp-size-xxxs);
-$comp-size-xxs: var(--td-comp-size-xxs);
-$comp-size-xs: var(--td-comp-size-xs);
-$comp-size-s: var(--td-comp-size-s);
-$comp-size-m: var(--td-comp-size-m);
-$comp-size-l: var(--td-comp-size-l);
-$comp-size-xl: var(--td-comp-size-xl);
-$comp-size-xxl: var(--td-comp-size-xxl);
-$comp-size-xxxl: var(--td-comp-size-xxxl);
-$comp-size-xxxxl: var(--td-comp-size-xxxxl);
-$comp-size-xxxxxl: var(--td-comp-size-xxxxxl);
-// popup 弹出层整体边距token
-$pop-padding-s: var(--td-pop-padding-s);
-$pop-padding-m: var(--td-pop-padding-m);
-$pop-padding-l: var(--td-pop-padding-l);
-$pop-padding-xl: var(--td-pop-padding-xl);
-$pop-padding-xxl: var(--td-pop-padding-xxl);
-// component 组件左右边距 token
-$comp-paddingLR-xxs: var(--td-comp-paddingLR-xxs);
-$comp-paddingLR-xs: var(--td-comp-paddingLR-xs);
-$comp-paddingLR-s: var(--td-comp-paddingLR-s);
-$comp-paddingLR-m: var(--td-comp-paddingLR-m);
-$comp-paddingLR-l: var(--td-comp-paddingLR-l);
-$comp-paddingLR-xl: var(--td-comp-paddingLR-xl);
-$comp-paddingLR-xxl: var(--td-comp-paddingLR-xxl);
-// component 组件上下边距 token
-$comp-paddingTB-xxs: var(--td-comp-paddingTB-xxs);
-$comp-paddingTB-xs: var(--td-comp-paddingTB-xs);
-$comp-paddingTB-s: var(--td-comp-paddingTB-s);
-$comp-paddingTB-m: var(--td-comp-paddingTB-m);
-$comp-paddingTB-l: var(--td-comp-paddingTB-l);
-$comp-paddingTB-xl: var(--td-comp-paddingTB-xl);
-$comp-paddingTB-xxl: var(--td-comp-paddingTB-xxl);
-// component 组件间距 token
-$comp-margin-xxs: var(--td-comp-margin-xxs);
-$comp-margin-xs: var(--td-comp-margin-xs);
-$comp-margin-s: var(--td-comp-margin-s);
-$comp-margin-m: var(--td-comp-margin-m);
-$comp-margin-l: var(--td-comp-margin-l);
-$comp-margin-xl: var(--td-comp-margin-xl);
-$comp-margin-xxl: var(--td-comp-margin-xxl);
-$comp-margin-xxxl: var(--td-comp-margin-xxxl);
-$comp-margin-xxxxl: var(--td-comp-margin-xxxxl);
-// Spacer 【deprecated】
-$spacer: 8px;
-$spacer-s: $spacer * 0.5; // 间距-4
-$spacer-m: $spacer * 0.75; // 间距-6
-$spacer-l: $spacer * 1.5; // 间距-12
-$spacer-1: $spacer; // 间距-8
-$spacer-2: $spacer * 2; // 间距-16
-$spacer-3: $spacer * 3; // 间距-24
-$spacer-4: $spacer * 4; // 间距-32
-$spacer-5: $spacer * 5; // 间距-40
-$spacer-6: $spacer * 6; // 间距-48
-$spacer-7: $spacer * 7; // 间距-48
-$spacer-8: $spacer * 8; // 间距-48
-$spacer-9: $spacer * 9; // 间距-48
-$spacer-10: $spacer * 10; // 间距-80
-$text-line-height-s: var(--td-line-height-body-small);
-$text-line-height-base: var(--td-line-height-body-medium);
-$text-line-height-l: var(--td-line-height-body-large);
-$text-line-height-xl: var(--td-line-height-title-large);
-$text-line-height-xxl: var(--td-line-height-headline-large);
-// Font
-$font-size: 10px;
-$font-size-s: var(--td-font-size-body-small);
-$font-size-base: var(--td-font-size-body-medium);
-$font-size-l: var(--td-font-size-body-large);
-$font-size-xl: var(--td-font-size-title-large);
-$font-size-xxl: var(--td-font-size-headline-large);
-$font-family: var(--td-font-family); // 字体-磅数-常规
-$font-family-medium: var(--td-font-family-medium); // 字体-磅数-粗体
-// 使用以下与Design Token对应的font token开发组件对应字体、行高
-$font-link-small: var(--td-font-link-small);
-$font-link-medium: var(--td-font-link-medium);
-$font-link-large: var(--td-font-link-large);
-$font-mark-small: var(--td-font-mark-small);
-$font-mark-medium: var(--td-font-mark-medium);
-$font-body-small: var(--td-font-body-small);
-$font-body-medium: var(--td-font-body-medium);
-$font-body-large: var(--td-font-body-large);
-$font-title-small: var(--td-font-title-small);
-$font-title-medium: var(--td-font-title-medium);
-$font-title-large: var(--td-font-title-large);
-$font-title-extraLarge: var(--td-font-title-extraLarge);
-$font-headline-small: var(--td-font-headline-small);
-$font-headline-medium: var(--td-font-headline-medium);
-$font-headline-large: var(--td-font-headline-large);
-$font-display-medium: var(--td-font-display-medium);
-$font-display-large: var(--td-font-display-large);
-// Border Radius
-$border-radius-small: var(--td-radius-small); // 圆角-2
-$border-radius-default: var(--td-radius-default); // 圆角-3
-$border-radius-medium: var(--td-radius-medium); // 圆角-6
-$border-radius-large: var(--td-radius-large); // 圆角-9
-$border-radius-extraLarge: var(--td-radius-extraLarge); // 圆角-12
-$border-radius-round: var(--td-radius-round); // 圆角-999
-$border-radius-circle: var(--td-radius-circle); // 圆角-全圆
-// 表单相关
-$form-height: 30px;
-$form-text-color: $text-color-primary;
-$form-bg-color: $bg-color-container;
-$form-border-color: $border-level-2-color;
-// 图标尺寸
-$icon-default: 16px;
-$icon-l: 24px;
-// 滚动条颜色
-$scrollbar-color: var(--td-scrollbar-color);
-// 滚动条悬浮颜色
-$scrollbar-hover-color: var(--td-scrollbar-hover-color);
-// 滚动条轨道颜色
-$scroll-track-color: var(--td-scroll-track-color);
-// 响应式断点
-$screen-xs: 320px;
-$screen-xs-min: $screen-xs;
-$screen-sm: 768px;
-$screen-sm-min: $screen-sm;
-$screen-md: 992px;
-$screen-md-min: $screen-md;
-$screen-lg: 1200px;
-$screen-lg-min: $screen-lg;
-$screen-xl: 1400px;
-$screen-xl-min: $screen-xl;
-$screen-xxl: 1880px;
-$screen-xxl-min: $screen-xxl;
-// 动画
-$anim-time-fn-easing: cubic-bezier(0.38, 0, 0.24, 1);
-$anim-time-fn-ease-out: cubic-bezier(0, 0, 0.15, 1);
-$anim-time-fn-ease-in: cubic-bezier(0.82, 0, 1, 0.9);
-$anim-duration-base: 0.2s;
-$anim-duration-moderate: 0.24s;
-$anim-duration-slow: 0.28s;
-// 统一管理各组件层级关系
-$z-index-back-top: 300;
-$z-index-affix: 500;
-$z-index-drawer: 1500;
-$z-index-dialog: 2500;
-$z-index-image-viewer: 3000;
-$z-index-loading: 3500;
-$z-index-message: 5000;
-$z-index-Popup: 5500;
-$z-index-Tooltip: 5600;
-$z-index-Notification: 6000;
-$z-index-dragging: 6500;
-$z-index-guide: 999999;
+// 公共前缀
+$prefix: t;
+// 颜色色板
+$brand-color-1: var(--td-brand-color-1);
+$brand-color-2: var(--td-brand-color-2);
+$brand-color-3: var(--td-brand-color-3);
+$brand-color-4: var(--td-brand-color-4);
+$brand-color-5: var(--td-brand-color-5);
+$brand-color-6: var(--td-brand-color-6);
+$brand-color-7: var(--td-brand-color-7);
+$brand-color-8: var(--td-brand-color-8);
+$brand-color-9: var(--td-brand-color-9);
+$brand-color-10: var(--td-brand-color-10);
+$warning-color-1: var(--td-warning-color-1);
+$warning-color-2: var(--td-warning-color-2);
+$warning-color-3: var(--td-warning-color-3);
+$warning-color-4: var(--td-warning-color-4);
+$warning-color-5: var(--td-warning-color-5);
+$warning-color-6: var(--td-warning-color-6);
+$warning-color-7: var(--td-warning-color-7);
+$warning-color-8: var(--td-warning-color-8);
+$warning-color-9: var(--td-warning-color-9);
+$warning-color-10: var(--td-warning-color-10);
+$error-color-1: var(--td-error-color-1);
+$error-color-2: var(--td-error-color-2);
+$error-color-3: var(--td-error-color-3);
+$error-color-4: var(--td-error-color-4);
+$error-color-5: var(--td-error-color-5);
+$error-color-6: var(--td-error-color-6);
+$error-color-7: var(--td-error-color-7);
+$error-color-8: var(--td-error-color-8);
+$error-color-9: var(--td-error-color-9);
+$error-color-10: var(--td-error-color-10);
+$success-color-1: var(--td-success-color-1);
+$success-color-2: var(--td-success-color-2);
+$success-color-3: var(--td-success-color-3);
+$success-color-4: var(--td-success-color-4);
+$success-color-5: var(--td-success-color-5);
+$success-color-6: var(--td-success-color-6);
+$success-color-7: var(--td-success-color-7);
+$success-color-8: var(--td-success-color-8);
+$success-color-9: var(--td-success-color-9);
+$success-color-10: var(--td-success-color-10);
+$gray-color-1: var(--td-gray-color-1);
+$gray-color-2: var(--td-gray-color-2);
+$gray-color-3: var(--td-gray-color-3);
+$gray-color-4: var(--td-gray-color-4);
+$gray-color-5: var(--td-gray-color-5);
+$gray-color-6: var(--td-gray-color-6);
+$gray-color-7: var(--td-gray-color-7);
+$gray-color-8: var(--td-gray-color-8);
+$gray-color-9: var(--td-gray-color-9);
+$gray-color-10: var(--td-gray-color-10);
+$gray-color-11: var(--td-gray-color-11);
+$gray-color-12: var(--td-gray-color-12);
+$gray-color-13: var(--td-gray-color-13);
+$gray-color-14: var(--td-gray-color-14);
+// 文字 & 图标 颜色
+$font-white-1: var(--td-font-white-1);
+$font-white-2: var(--td-font-white-2);
+$font-white-3: var(--td-font-white-3);
+$font-white-4: var(--td-font-white-4);
+$font-gray-1: var(--td-font-gray-1);
+$font-gray-2: var(--td-font-gray-2);
+$font-gray-3: var(--td-font-gray-3);
+$font-gray-4: var(--td-font-gray-4);
+// 基础颜色
+$brand-color: var(--td-brand-color); // 色彩-品牌-可操作
+$warning-color: var(--td-warning-color); // 色彩-功能-警告
+$error-color: var(--td-error-color); // 色彩-功能-失败
+$success-color: var(--td-success-color); // 色彩-功能-成功
+// 基础颜色的扩充用于 hover / 聚焦 / 禁用 / 点击 等状态
+$brand-color-hover: var(--td-brand-color-hover); // hover
+$brand-color-focus: var(--td-brand-color-focus); // focus态，包括鼠标和键盘
+$brand-color-active: var(--td-brand-color-active); // 点击
+$brand-color-disabled: var(--td-brand-color-disabled); // 禁用
+$brand-color-light: var(--td-brand-color-light); // 浅色的选中
+$brand-color-light-hover: var(--td-brand-color-light-hover);
+// 警告色扩充
+$warning-color-hover: var(--td-warning-color-hover);
+$warning-color-focus: var(--td-warning-color-focus);
+$warning-color-active: var(--td-warning-color-active);
+$warning-color-disabled: var(--td-warning-color-disabled);
+$warning-color-light: var(--td-warning-color-light);
+$warning-color-light-hover: var(--td-warning-color-light-hover);
+// 失败/错误色扩充
+$error-color-hover: var(--td-error-color-hover);
+$error-color-focus: var(--td-error-color-focus);
+$error-color-active: var(--td-error-color-active);
+$error-color-disabled: var(--td-error-color-disabled);
+$error-color-light: var(--td-error-color-light);
+$error-color-light-hover: var(--td-error-color-light-hover);
+// 成功色扩充
+$success-color-hover: var(--td-success-color-hover);
+$success-color-focus: var(--td-success-color-focus);
+$success-color-active: var(--td-success-color-active);
+$success-color-disabled: var(--td-success-color-disabled);
+$success-color-light: var(--td-success-color-light);
+$success-color-light-hover: var(--td-success-color-light-hover);
+// 遮罩
+$mask-active: var(--td-mask-active); // 遮罩-弹出
+$mask-disabled: var(--td-mask-disabled); // 遮罩-禁用
+$mask-bg: var(--td-mask-background); // 二维码遮罩
+// 背景颜色
+$bg-color-page: var(--td-bg-color-page); // 色彩 - page
+$bg-color-container: var(--td-bg-color-container); // 色彩 - 容器
+$bg-color-container-hover: var(--td-bg-color-container-hover); // 色彩 - 容器 - hover
+$bg-color-container-active: var(--td-bg-color-container-active); // 色彩 - 容器 - active
+$bg-color-container-select: var(--td-bg-color-container-select); // 色彩 - 容器 - select
+$bg-color-secondarycontainer: var(--td-bg-color-secondarycontainer); // 色彩 - 次级容器
+$bg-color-secondarycontainer-hover: var(--td-bg-color-secondarycontainer-hover); // 色彩 - 次级容器 - hover
+$bg-color-secondarycontainer-active: var(--td-bg-color-secondarycontainer-active); // 色彩 - 次级容器 - active
+$bg-color-component: var(--td-bg-color-component); // 色彩  - 组件
+$bg-color-component-hover: var(--td-bg-color-component-hover); // 色彩 - 组件 - hover
+$bg-color-component-active: var(--td-bg-color-component-active); // 色彩 - 组件 - active
+$bg-color-secondarycomponent: var(--td-bg-color-secondarycomponent); // 色彩 - 次级组件
+$bg-color-secondarycomponent-hover: var(--td-bg-color-secondarycomponent-hover); // 色彩 - 次级组件 - hover
+$bg-color-secondarycomponent-active: var(--td-bg-color-secondarycomponent-active); // 色彩 - 次级组件 - active
+$bg-color-component-disabled: var(--td-bg-color-component-disabled); // 色彩 - 组件 - disabled
+// TODO: 考虑是否在组件内部做判断，不增加额外变量
+// 特殊组件背景色，目前只用button、input 组件多主题场景，浅色主题下固定为白色，深色主题下transparent 适配背景颜色
+$bg-color-specialcomponent: var(--td-bg-color-specialcomponent);
+// 文本颜色
+$text-color-primary: var(--td-text-color-primary); // 色彩-文字-主要
+$text-color-secondary: var(--td-text-color-secondary); // 色彩-文字-次要
+$text-color-placeholder: var(--td-text-color-placeholder); // 色彩-文字-占位说明
+$text-color-disabled: var(--td-text-color-disabled); // 色彩-文字-禁用
+$text-color-anti: var(--td-text-color-anti); // 色彩-文字-反色
+$text-color-brand: var(--td-text-color-brand); // 色彩-文字-品牌
+$text-color-link: var(--td-text-color-link); // 色彩-文字-链接
+// 分割线
+$border-level-1-color: var(--td-border-level-1-color);
+$component-stroke: var(--td-component-stroke);
+// 边框
+$border-level-2-color: var(--td-border-level-2-color);
+$component-border: var(--td-component-border);
+// shadow
+// 基础/下层 投影 hover 使用的组件包括：表格
+$shadow-1: var(--td-shadow-1);
+// 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认 / 选择
+$shadow-2: var(--td-shadow-2);
+// 上层投影（警告/弹窗）使用的组件包括：全局提示 / 消息通知
+$shadow-3: var(--td-shadow-3);
+// 内投影用于弹窗类组件（气泡确认 / 全局提示 / 消息通知）的内描影
+$shadow-inset-top: var(--td-shadow-inset-top);
+$shadow-inset-right: var(--td-shadow-inset-right);
+$shadow-inset-bottom: var(--td-shadow-inset-bottom);
+$shadow-inset-left: var(--td-shadow-inset-left);
+$shadow-inset: $shadow-inset-top, $shadow-inset-right, $shadow-inset-bottom, $shadow-inset-left;
+// 融合阴影
+$shadow-2-inset: $shadow-2, $shadow-inset;
+$shadow-3-inset: $shadow-3, $shadow-inset;
+$size-1: var(--td-size-1);
+$size-2: var(--td-size-2);
+$size-3: var(--td-size-3);
+$size-4: var(--td-size-4);
+$size-5: var(--td-size-5);
+$size-6: var(--td-size-6);
+$size-7: var(--td-size-7);
+$size-8: var(--td-size-8);
+$size-9: var(--td-size-9);
+$size-10: var(--td-size-10);
+$size-11: var(--td-size-11);
+$size-12: var(--td-size-12);
+$size-13: var(--td-size-13);
+$size-14: var(--td-size-14);
+$size-15: var(--td-size-15);
+$size-16: var(--td-size-16);
+// component 组件尺寸高度相关 token
+$comp-size-xxxs: var(--td-comp-size-xxxs);
+$comp-size-xxs: var(--td-comp-size-xxs);
+$comp-size-xs: var(--td-comp-size-xs);
+$comp-size-s: var(--td-comp-size-s);
+$comp-size-m: var(--td-comp-size-m);
+$comp-size-l: var(--td-comp-size-l);
+$comp-size-xl: var(--td-comp-size-xl);
+$comp-size-xxl: var(--td-comp-size-xxl);
+$comp-size-xxxl: var(--td-comp-size-xxxl);
+$comp-size-xxxxl: var(--td-comp-size-xxxxl);
+$comp-size-xxxxxl: var(--td-comp-size-xxxxxl);
+// popup 弹出层整体边距token
+$pop-padding-s: var(--td-pop-padding-s);
+$pop-padding-m: var(--td-pop-padding-m);
+$pop-padding-l: var(--td-pop-padding-l);
+$pop-padding-xl: var(--td-pop-padding-xl);
+$pop-padding-xxl: var(--td-pop-padding-xxl);
+// component 组件左右边距 token
+$comp-paddingLR-xxs: var(--td-comp-paddingLR-xxs);
+$comp-paddingLR-xs: var(--td-comp-paddingLR-xs);
+$comp-paddingLR-s: var(--td-comp-paddingLR-s);
+$comp-paddingLR-m: var(--td-comp-paddingLR-m);
+$comp-paddingLR-l: var(--td-comp-paddingLR-l);
+$comp-paddingLR-xl: var(--td-comp-paddingLR-xl);
+$comp-paddingLR-xxl: var(--td-comp-paddingLR-xxl);
+// component 组件上下边距 token
+$comp-paddingTB-xxs: var(--td-comp-paddingTB-xxs);
+$comp-paddingTB-xs: var(--td-comp-paddingTB-xs);
+$comp-paddingTB-s: var(--td-comp-paddingTB-s);
+$comp-paddingTB-m: var(--td-comp-paddingTB-m);
+$comp-paddingTB-l: var(--td-comp-paddingTB-l);
+$comp-paddingTB-xl: var(--td-comp-paddingTB-xl);
+$comp-paddingTB-xxl: var(--td-comp-paddingTB-xxl);
+// component 组件间距 token
+$comp-margin-xxs: var(--td-comp-margin-xxs);
+$comp-margin-xs: var(--td-comp-margin-xs);
+$comp-margin-s: var(--td-comp-margin-s);
+$comp-margin-m: var(--td-comp-margin-m);
+$comp-margin-l: var(--td-comp-margin-l);
+$comp-margin-xl: var(--td-comp-margin-xl);
+$comp-margin-xxl: var(--td-comp-margin-xxl);
+$comp-margin-xxxl: var(--td-comp-margin-xxxl);
+$comp-margin-xxxxl: var(--td-comp-margin-xxxxl);
+// Spacer 【deprecated】
+$spacer: 8px;
+$spacer-s: $spacer * 0.5; // 间距-4
+$spacer-m: $spacer * 0.75; // 间距-6
+$spacer-l: $spacer * 1.5; // 间距-12
+$spacer-1: $spacer; // 间距-8
+$spacer-2: $spacer * 2; // 间距-16
+$spacer-3: $spacer * 3; // 间距-24
+$spacer-4: $spacer * 4; // 间距-32
+$spacer-5: $spacer * 5; // 间距-40
+$spacer-6: $spacer * 6; // 间距-48
+$spacer-7: $spacer * 7; // 间距-48
+$spacer-8: $spacer * 8; // 间距-48
+$spacer-9: $spacer * 9; // 间距-48
+$spacer-10: $spacer * 10; // 间距-80
+$text-line-height-s: var(--td-line-height-body-small);
+$text-line-height-base: var(--td-line-height-body-medium);
+$text-line-height-l: var(--td-line-height-body-large);
+$text-line-height-xl: var(--td-line-height-title-large);
+$text-line-height-xxl: var(--td-line-height-headline-large);
+// Font
+$font-size: 10px;
+$font-size-s: var(--td-font-size-body-small);
+$font-size-base: var(--td-font-size-body-medium);
+$font-size-l: var(--td-font-size-body-large);
+$font-size-xl: var(--td-font-size-title-large);
+$font-size-xxl: var(--td-font-size-headline-large);
+$font-family: var(--td-font-family); // 字体-磅数-常规
+$font-family-medium: var(--td-font-family-medium); // 字体-磅数-粗体
+// 使用以下与Design Token对应的font token开发组件对应字体、行高
+$font-link-small: var(--td-font-link-small);
+$font-link-medium: var(--td-font-link-medium);
+$font-link-large: var(--td-font-link-large);
+$font-mark-small: var(--td-font-mark-small);
+$font-mark-medium: var(--td-font-mark-medium);
+$font-body-small: var(--td-font-body-small);
+$font-body-medium: var(--td-font-body-medium);
+$font-body-large: var(--td-font-body-large);
+$font-title-small: var(--td-font-title-small);
+$font-title-medium: var(--td-font-title-medium);
+$font-title-large: var(--td-font-title-large);
+$font-title-extraLarge: var(--td-font-title-extraLarge);
+$font-headline-small: var(--td-font-headline-small);
+$font-headline-medium: var(--td-font-headline-medium);
+$font-headline-large: var(--td-font-headline-large);
+$font-display-medium: var(--td-font-display-medium);
+$font-display-large: var(--td-font-display-large);
+// Border Radius
+$border-radius-small: var(--td-radius-small); // 圆角-2
+$border-radius-default: var(--td-radius-default); // 圆角-3
+$border-radius-medium: var(--td-radius-medium); // 圆角-6
+$border-radius-large: var(--td-radius-large); // 圆角-9
+$border-radius-extraLarge: var(--td-radius-extraLarge); // 圆角-12
+$border-radius-round: var(--td-radius-round); // 圆角-999
+$border-radius-circle: var(--td-radius-circle); // 圆角-全圆
+// 表单相关
+$form-height: 30px;
+$form-text-color: $text-color-primary;
+$form-bg-color: $bg-color-container;
+$form-border-color: $border-level-2-color;
+// 图标尺寸
+$icon-default: 16px;
+$icon-l: 24px;
+// 滚动条颜色
+$scrollbar-color: var(--td-scrollbar-color);
+// 滚动条悬浮颜色
+$scrollbar-hover-color: var(--td-scrollbar-hover-color);
+// 滚动条轨道颜色
+$scroll-track-color: var(--td-scroll-track-color);
+// 响应式断点
+$screen-xs: 320px;
+$screen-xs-min: $screen-xs;
+$screen-sm: 768px;
+$screen-sm-min: $screen-sm;
+$screen-md: 992px;
+$screen-md-min: $screen-md;
+$screen-lg: 1200px;
+$screen-lg-min: $screen-lg;
+$screen-xl: 1400px;
+$screen-xl-min: $screen-xl;
+$screen-xxl: 1880px;
+$screen-xxl-min: $screen-xxl;
+// 动画
+$anim-time-fn-easing: cubic-bezier(0.38, 0, 0.24, 1);
+$anim-time-fn-ease-out: cubic-bezier(0, 0, 0.15, 1);
+$anim-time-fn-ease-in: cubic-bezier(0.82, 0, 1, 0.9);
+$anim-duration-base: 0.2s;
+$anim-duration-moderate: 0.24s;
+$anim-duration-slow: 0.28s;
+// 统一管理各组件层级关系
+$z-index-back-top: 300;
+$z-index-affix: 500;
+$z-index-drawer: 1500;
+$z-index-dialog: 2500;
+$z-index-image-viewer: 3000;
+$z-index-loading: 3500;
+$z-index-message: 5000;
+$z-index-Popup: 5500;
+$z-index-Tooltip: 5600;
+$z-index-Notification: 6000;
+$z-index-dragging: 6500;
+$z-index-guide: 999999;
+// Tooltip 相关变量
+$tooltip-padding: 8px 12px;
+$tooltip-font-size: $font-size-s;
+$tooltip-line-height: $text-line-height-s;
+$tooltip-text-color: $text-color-anti;
+$tooltip-bg-color: $gray-color-9;
+$tooltip-border-radius: $border-radius-small;
+$tooltip-shadow: $shadow-2;
+// Tooltip 主题变量
+$tooltip-bg-color-dark: $gray-color-9;
+$tooltip-text-color-dark: $text-color-anti;
+$tooltip-bg-color-light: $bg-color-container;
+$tooltip-text-color-light: $text-color-primary;
+$tooltip-shadow-light: $shadow-2;