@tdesign/uniapp 0.0.1-alpha.1 → 0.7.0

package/dist/badge/props.ts

@@ -0,0 +1,55 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdBadgeProps } from './type';
+export default {
+  /** 颜色 */
+  color: {
+    type: String,
+    default: '',
+  },
+  /** 徽标内容，示例：`content='自定义内容'`。也可以使用默认插槽定义 */
+  content: {
+    type: String,
+    default: '',
+  },
+  /** 徽标右上角内容。可以是数字，也可以是文字。如：'new'/3/99+。特殊：值为空表示使用插槽渲染 */
+  count: {
+    type: [String, Number],
+    default: 0 as TdBadgeProps['count'],
+  },
+  /** 是否为红点 */
+  dot: Boolean,
+  /** 封顶的数字值 */
+  maxCount: {
+    type: Number,
+    default: 99,
+  },
+  /** 设置状态点的位置偏移，示例：[-10, 20] 或 ['10em', '8rem'] */
+  offset: {
+    type: Array,
+  },
+  /** 徽标形状，其中 ribbon 和 ribbon-right 等效 */
+  shape: {
+    type: String,
+    default: 'circle' as TdBadgeProps['shape'],
+    validator(val: TdBadgeProps['shape']): boolean {
+      if (!val) return true;
+      return ['circle', 'square', 'bubble', 'ribbon', 'ribbon-right', 'ribbon-left', 'triangle-right', 'triangle-left'].includes(val);
+    },
+  },
+  /** 当数值为 0 时，是否展示徽标 */
+  showZero: Boolean,
+  /** 尺寸 */
+  size: {
+    type: String,
+    default: 'medium' as TdBadgeProps['size'],
+    validator(val: TdBadgeProps['size']): boolean {
+      if (!val) return true;
+      return ['medium', 'large'].includes(val);
+    },
+  },
+};

package/dist/badge/type.ts

@@ -0,0 +1,60 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdBadgeProps {
+  /**
+   * 颜色
+   * @default ''
+   */
+  color?: string;
+  /**
+   * 徽标内容，示例：`content='自定义内容'`。也可以使用默认插槽定义
+   * @default ''
+   */
+  content?: string;
+  /**
+   * 徽标右上角内容。可以是数字，也可以是文字。如：'new'/3/99+。特殊：值为空表示使用插槽渲染
+   * @default 0
+   */
+  count?: string | number;
+  /**
+   * 是否为红点
+   * @default false
+   */
+  dot?: boolean;
+  /**
+   * 封顶的数字值
+   * @default 99
+   */
+  maxCount?: number;
+  /**
+   * 设置状态点的位置偏移，示例：[-10, 20] 或 ['10em', '8rem']
+   */
+  offset?: Array<string | number>;
+  /**
+   * 徽标形状，其中 ribbon 和 ribbon-right 等效
+   * @default circle
+   */
+  shape?:
+    | 'circle'
+    | 'square'
+    | 'bubble'
+    | 'ribbon'
+    | 'ribbon-right'
+    | 'ribbon-left'
+    | 'triangle-right'
+    | 'triangle-left';
+  /**
+   * 当数值为 0 时，是否展示徽标
+   * @default false
+   */
+  showZero?: boolean;
+  /**
+   * 尺寸
+   * @default medium
+   */
+  size?: 'medium' | 'large';
+}

package/dist/button/README.en-US.md

@@ -0,0 +1,238 @@
+---
+title: Button
+description: Buttons are used to open a closed-loop task, such as "delete" an object, "buy" an item, etc.
+spline: base
+isComponent: true
+---
+
+
+
+
+## Usage
+
+For global import, configure it in `app.json` in the root directory of the miniprogram. For local import, configure it in `index.json` of the page or component that needs to be imported.
+
+```json
+"usingComponents": {
+  "t-button": "tdesign-miniprogram/button/button"
+}
+```
+
+
+## Code Demo
+
+### 01 Component Type
+
+#### Basic Buttons
+
+{{ base }}
+
+#### Icon Button
+
+{{ icon-btn }}
+
+#### Ghost Button
+
+{{ ghost-btn }}
+
+#### Combination Button
+
+{{ group-btn }}
+
+#### Banner Button
+
+{{ block-btn }}
+
+### 02 Component State
+
+#### Buttons for different states
+
+{{ disabled }}
+
+### 03 Component Style
+
+#### Different sizes of buttons
+
+{{ size }}
+
+#### Different shaped buttons
+
+{{ shape }}
+
+#### Different color theme buttons
+
+{{ theme }}
+
+
+
+## API
+
+### Button Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+app-parameter | String | - | \- | N
+block | Boolean | false | make button to be a block-level element | N
+content | String | - | button's children elements | N
+custom-dataset | String / Number / Boolean / Object / Array | {} | Typescript：`string \| number \| boolean \| object \| Array<string \| number \| boolean \| object>` | N
+disabled | Boolean | undefined | disable the button, make it can not be clicked | N
+ghost | Boolean | false | make background-color to be transparent | N
+hover-class | String | - | \- | N
+hover-start-time | Number | 20 | \- | N
+hover-stay-time | Number | 70 | \- | N
+hover-stop-propagation | Boolean | false | \- | N
+icon | String / Object | - | icon name | N
+lang | String | - | message language。options: en/zh_CN/zh_TW | N
+loading | Boolean | false | set button to be loading state | N
+loading-props | Object | {} | Typescript：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/button/type.ts) | N
+open-type | String | - | open type of button, [Miniprogram Button](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)。options: contact/share/getPhoneNumber/getUserInfo/launchApp/openSetting/feedback/chooseAvatar/agreePrivacyAuthorization | N
+phone-number-no-quota-toast | Boolean | true | \- | N
+send-message-img | String | 截图 | \- | N
+send-message-path | String | 当前分享路径 | \- | N
+send-message-title | String | 当前标题 | \- | N
+session-from | String | - | \- | N
+shape | String | rectangle | button shape。options: rectangle/square/round/circle | N
+show-message-card | Boolean | false | \- | N
+size | String | medium | a button has four size。options: extra-small/small/medium/large | N
+t-id | String | - | id | N
+theme | String | default | button theme。options: default/primary/danger/light | N
+type | String | - | type of button element, same as formType of Miniprogram。options: submit/reset | N
+variant | String | base | variant of button。options: base/outline/dashed/text | N
+
+### Button Events
+
+name | params | description
+-- | -- | --
+agreeprivacyauthorization | \- | \-
+chooseavatar | \- | \-
+click | `(e: MouseEvent)` | trigger on click
+contact | \- | \-
+createliveactivity | \- | \-
+error | \- | \-
+getphonenumber | \- | \-
+getrealtimephonenumber | \- | \-
+getuserinfo | \- | \-
+launchapp | \- | \-
+opensetting | \- | \-
+
+### Button Slots
+
+name | Description
+-- | --
+\- | \-
+content | button's children elements
+suffix | \-
+
+### Button External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-icon | class name of icon
+t-class-loading | class name of loading
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-button-border-radius | @radius-default | -
+--td-button-border-width | 4rpx | -
+--td-button-danger-active-bg-color | @error-color-active | -
+--td-button-danger-active-border-color | @error-color-active | -
+--td-button-danger-bg-color | @error-color | -
+--td-button-danger-border-color | @error-color | -
+--td-button-danger-color | @text-color-anti | -
+--td-button-danger-dashed-border-color | @button-danger-dashed-color | -
+--td-button-danger-dashed-color | @error-color | -
+--td-button-danger-dashed-disabled-color | @button-danger-disabled-color | -
+--td-button-danger-disabled-bg | @error-color-3 | -
+--td-button-danger-disabled-border-color | @error-color-3 | -
+--td-button-danger-disabled-color | @font-white-1 | -
+--td-button-danger-outline-active-bg-color | @bg-color-container-active | -
+--td-button-danger-outline-active-border-color | @error-color-active | -
+--td-button-danger-outline-border-color | @button-danger-outline-color | -
+--td-button-danger-outline-color | @error-color | -
+--td-button-danger-outline-disabled-color | @error-color-3 | -
+--td-button-danger-text-active-bg-color | @bg-color-container-active | -
+--td-button-danger-text-color | @error-color | -
+--td-button-danger-text-disabled-color | @button-danger-disabled-color | -
+--td-button-default-active-bg-color | @bg-color-component-active | -
+--td-button-default-active-border-color | @bg-color-component-active | -
+--td-button-default-bg-color | @bg-color-component | -
+--td-button-default-border-color | @bg-color-component | -
+--td-button-default-color | @text-color-primary | -
+--td-button-default-disabled-bg | @bg-color-component-disabled | -
+--td-button-default-disabled-border-color | @bg-color-component-disabled | -
+--td-button-default-disabled-color | @text-color-disabled | -
+--td-button-default-outline-active-bg-color | @bg-color-container-active | -
+--td-button-default-outline-active-border-color | @component-border | -
+--td-button-default-outline-border-color | @component-border | -
+--td-button-default-outline-color | @text-color-primary | -
+--td-button-default-outline-disabled-color | @component-border | -
+--td-button-default-text-active-bg-color | @bg-color-container-active | -
+--td-button-extra-small-font-size | @font-size-base | -
+--td-button-extra-small-height | 56rpx | -
+--td-button-extra-small-icon-size | 36rpx | -
+--td-button-extra-small-padding-horizontal | 16rpx | -
+--td-button-font-weight | 600 | -
+--td-button-ghost-border-color | @button-ghost-color | -
+--td-button-ghost-color | @text-color-anti | -
+--td-button-ghost-danger-border-color | @error-color | -
+--td-button-ghost-danger-color | @error-color | -
+--td-button-ghost-danger-hover-color | @error-color-active | -
+--td-button-ghost-disabled-color | @font-white-4 | -
+--td-button-ghost-hover-color | @font-white-2 | -
+--td-button-ghost-primary-border-color | @brand-color | -
+--td-button-ghost-primary-color | @brand-color | -
+--td-button-ghost-primary-hover-color | @brand-color-active | -
+--td-button-icon-border-radius | 8rpx | -
+--td-button-icon-spacer | @spacer | -
+--td-button-large-font-size | @font-size-m | -
+--td-button-large-height | 96rpx | -
+--td-button-large-icon-size | 48rpx | -
+--td-button-large-padding-horizontal | 40rpx | -
+--td-button-light-active-bg-color | @brand-color-light-active | -
+--td-button-light-active-border-color | @brand-color-light-active | -
+--td-button-light-bg-color | @brand-color-light | -
+--td-button-light-border-color | @brand-color-light | -
+--td-button-light-color | @brand-color | -
+--td-button-light-disabled-bg | @brand-color-light | -
+--td-button-light-disabled-border-color | @brand-color-light | -
+--td-button-light-disabled-color | @brand-color-disabled | -
+--td-button-light-outline-active-bg-color | @brand-color-light-active | -
+--td-button-light-outline-active-border-color | @brand-color-active | -
+--td-button-light-outline-bg-color | @brand-color-light | -
+--td-button-light-outline-border-color | @button-light-outline-color | -
+--td-button-light-outline-color | @brand-color | -
+--td-button-light-outline-disabled-color | @brand-color-disabled | -
+--td-button-light-text-active-bg-color | @bg-color-container-active | -
+--td-button-light-text-color | @brand-color | -
+--td-button-medium-font-size | @font-size-m | -
+--td-button-medium-height | 80rpx | -
+--td-button-medium-icon-size | 40rpx | -
+--td-button-medium-padding-horizontal | 32rpx | -
+--td-button-primary-active-bg-color | @brand-color-active | -
+--td-button-primary-active-border-color | @brand-color-active | -
+--td-button-primary-bg-color | @brand-color | -
+--td-button-primary-border-color | @brand-color | -
+--td-button-primary-color | @text-color-anti | -
+--td-button-primary-dashed-border-color | @button-primary-dashed-color | -
+--td-button-primary-dashed-color | @brand-color | -
+--td-button-primary-dashed-disabled-color | @brand-color-disabled | -
+--td-button-primary-disabled-bg | @brand-color-disabled | -
+--td-button-primary-disabled-border-color | @brand-color-disabled | -
+--td-button-primary-disabled-color | @text-color-anti | -
+--td-button-primary-outline-active-bg-color | @bg-color-container-active | -
+--td-button-primary-outline-active-border-color | @brand-color-active | -
+--td-button-primary-outline-border-color | @button-primary-outline-color | -
+--td-button-primary-outline-color | @brand-color | -
+--td-button-primary-outline-disabled-color | @brand-color-disabled | -
+--td-button-primary-text-active-bg-color | @bg-color-container-active | -
+--td-button-primary-text-color | @brand-color | -
+--td-button-primary-text-disabled-color | @brand-color-disabled | -
+--td-button-small-font-size | @font-size-base | -
+--td-button-small-height | 64rpx | -
+--td-button-small-icon-size | 36rpx | -
+--td-button-small-padding-horizontal | 24rpx | -

package/dist/button/README.md

@@ -0,0 +1,229 @@
+---
+title: Button 按钮
+description: 用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。
+spline: base
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TButton from '@tdesign/uniapp/button/button.vue';
+```
+
+### 01 组件类型
+
+#### 基础按钮
+
+{{ base }}
+
+#### 图标按钮
+
+{{ icon-btn }}
+
+#### 幽灵按钮
+
+{{ ghost-btn }}
+
+#### 组合按钮
+
+{{ group-btn }}
+
+#### 通栏按钮
+
+{{ block-btn }}
+
+### 02 组件状态
+
+#### 按钮禁用态
+
+{{ disabled }}
+
+### 03 组件样式
+
+#### 按钮尺寸
+
+{{ size }}
+
+#### 按钮形状
+
+{{ shape }}
+
+#### 按钮主题
+
+{{ theme }}
+
+## API
+
+### Button Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+app-parameter | String | - | 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 | N
+block | Boolean | false | 是否为块级元素 | N
+content | String | - | 按钮内容 | N
+custom-dataset | String / Number / Boolean / Object / Array | {} | 自定义 dataset，可通过 event.currentTarget.dataset.custom 获取。TS 类型：`string \| number \| boolean \| object \| Array<string \| number \| boolean \| object>` | N
+disabled | Boolean | undefined | 禁用状态。优先级：Button.disabled > Form.disabled | N
+ghost | Boolean | false | 是否为幽灵按钮（镂空按钮） | N
+hover-class | String | - | 指定按钮按下去的样式类，按钮不为加载或禁用状态时有效。当 `hover-class="none"` 时，没有点击态效果 | N
+hover-start-time | Number | 20 | 按住后多久出现点击态，单位毫秒 | N
+hover-stay-time | Number | 70 | 手指松开后点击态保留时间，单位毫秒 | N
+hover-stop-propagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态 | N
+icon | String / Object | - | 图标名称。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon` | N
+lang | String | - | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。<br />具体释义：<br />`en` 英文；<br />`zh_CN` 简体中文；<br />`zh_TW` 繁体中文。<br />[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)。可选项：en/zh_CN/zh_TW | N
+loading | Boolean | false | 是否显示为加载状态 | N
+loading-props | Object | {} | 透传 Loading 组件全部属性。TS 类型：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/button/type.ts) | N
+open-type | String | - | 微信开放能力。<br />具体释义：<br />`contact` 打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/customer-message/customer-message.html">具体说明</a> （*鸿蒙 OS 暂不支持*）；<br />`liveActivity` 通过前端获取<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/subscribe-message-2.html">新的一次性订阅消息下发机制</a>使用的 code；<br />`share` 触发用户转发，使用前建议先阅读<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html#使用指引">使用指引</a>；<br />`getPhoneNumber` 获取用户手机号，可以从 bindgetphonenumber 回调中获取到用户信息，<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html">具体说明</a> （*小程序插件中不能使用*）；<br />`getUserInfo` 获取用户信息，可以从 bindgetuserinfo 回调中获取到用户信息 （*小程序插件中不能使用*）；<br />`launchApp` 打开APP，可以通过 app-parameter 属性设定向 APP 传的参数<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html">具体说明</a>；<br />`openSetting` 打开授权设置页；<br />`feedback` 打开“意见反馈”页面，用户可提交反馈内容并上传<a href="https://developers.weixin.qq.com/miniprogram/dev/api/base/debug/wx.getLogManager.html">日志</a>，开发者可以登录<a href="https://mp.weixin.qq.com/">小程序管理后台</a>后进入左侧菜单“客服反馈”页面获取到反馈内容；<br />`chooseAvatar` 获取用户头像，可以从 bindchooseavatar 回调中获取到头像信息；<br />`agreePrivacyAuthorization`用户同意隐私协议按钮。用户点击一次此按钮后，所有隐私接口可以正常调用。可通过`bindagreeprivacyauthorization`监听用户同意隐私协议事件。隐私合规开发指南详情可见《<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/user-privacy/PrivacyAuthorize.html">小程序隐私协议开发指南</a>》。<br />[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)。可选项：contact/share/getPhoneNumber/getUserInfo/launchApp/openSetting/feedback/chooseAvatar/agreePrivacyAuthorization | N
+phone-number-no-quota-toast | Boolean | true | 原生按钮属性，当手机号快速验证或手机号实时验证额度用尽时，是否对用户展示“申请获取你的手机号，但该功能使用次数已达当前小程序上限，暂时无法使用”的提示，默认展示，open-type="getPhoneNumber" 或 open-type="getRealtimePhoneNumber" 时有效 | N
+send-message-img | String | 截图 | 会话内消息卡片图片，open-type="contact"时有效 | N
+send-message-path | String | 当前分享路径 | 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效 | N
+send-message-title | String | 当前标题 | 会话内消息卡片标题，open-type="contact"时有效 | N
+session-from | String | - | 会话来源，open-type="contact"时有效 | N
+shape | String | rectangle | 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形。可选项：rectangle/square/round/circle | N
+show-message-card | Boolean | false | 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效 | N
+size | String | medium | 组件尺寸。可选项：extra-small/small/medium/large | N
+t-id | String | - | 按钮标签id | N
+theme | String | default | 组件风格，依次为品牌色、危险色。可选项：default/primary/danger/light | N
+type | String | - | 同小程序的 formType。可选项：submit/reset | N
+variant | String | base | 按钮形式，基础、线框、虚线、文字。可选项：base/outline/dashed/text | N
+
+### Button Events
+
+名称 | 参数 | 描述
+-- | -- | --
+agreeprivacyauthorization | \- | 原生按钮属性，用户同意隐私协议事件回调，open-type=agreePrivacyAuthorization时有效 （Tips: 如果使用 onNeedPrivacyAuthorization 接口，需要在 bindagreeprivacyauthorization 触发后再调用 resolve({ event: "agree", buttonId })）
+chooseavatar | \- | 原生按钮属性，获取用户头像回调，`open-type=chooseAvatar` 时有效。返回 `e.detail.avatarUrl` 为头像临时文件链接
+click | `(e: MouseEvent)` | 点击时触发
+contact | \- | 原生按钮属性，客服消息回调，`open-type="contact"` 时有效
+createliveactivity | \- | 新的一次性订阅消息下发机制回调，`open-type=liveActivity` 时有效
+error | \- | 原生按钮属性，当使用开放能力时，发生错误的回调，`open-type=launchApp` 时有效
+getphonenumber | \- | 原生按钮属性，手机号快速验证回调，open-type=getPhoneNumber时有效。Tips：在触发 bindgetphonenumber 回调后应立即隐藏手机号按钮组件，或置为 disabled 状态，避免用户重复授权手机号产生额外费用
+getrealtimephonenumber | \- | 原生按钮属性，手机号实时验证回调，open-type=getRealtimePhoneNumber 时有效。Tips：在触发 bindgetrealtimephonenumber 回调后应立即隐藏手机号按钮组件，或置为 disabled 状态，避免用户重复授权手机号产生额外费用
+getuserinfo | \- | 原生按钮属性，用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致，open-type="getUserInfo"时有效
+launchapp | \- | 打开 APP 成功的回调，`open-type=launchApp` 时有效
+opensetting | \- | 原生按钮属性，在打开授权设置页后回调，open-type=openSetting时有效
+
+### Button Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，作用同 `content` 插槽
+content | 自定义 `content` 显示内容
+suffix | 右侧内容，可用于定义右侧图标
+
+### Button External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-icon | 图标样式类
+t-class-loading | 加载样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-button-border-radius | @radius-default | -
+--td-button-border-width | 4rpx | -
+--td-button-danger-active-bg-color | @error-color-active | -
+--td-button-danger-active-border-color | @error-color-active | -
+--td-button-danger-bg-color | @error-color | -
+--td-button-danger-border-color | @error-color | -
+--td-button-danger-color | @text-color-anti | -
+--td-button-danger-dashed-border-color | @button-danger-dashed-color | -
+--td-button-danger-dashed-color | @error-color | -
+--td-button-danger-dashed-disabled-color | @button-danger-disabled-color | -
+--td-button-danger-disabled-bg | @error-color-3 | -
+--td-button-danger-disabled-border-color | @error-color-3 | -
+--td-button-danger-disabled-color | @font-white-1 | -
+--td-button-danger-outline-active-bg-color | @bg-color-container-active | -
+--td-button-danger-outline-active-border-color | @error-color-active | -
+--td-button-danger-outline-border-color | @button-danger-outline-color | -
+--td-button-danger-outline-color | @error-color | -
+--td-button-danger-outline-disabled-color | @error-color-3 | -
+--td-button-danger-text-active-bg-color | @bg-color-container-active | -
+--td-button-danger-text-color | @error-color | -
+--td-button-danger-text-disabled-color | @button-danger-disabled-color | -
+--td-button-default-active-bg-color | @bg-color-component-active | -
+--td-button-default-active-border-color | @bg-color-component-active | -
+--td-button-default-bg-color | @bg-color-component | -
+--td-button-default-border-color | @bg-color-component | -
+--td-button-default-color | @text-color-primary | -
+--td-button-default-disabled-bg | @bg-color-component-disabled | -
+--td-button-default-disabled-border-color | @bg-color-component-disabled | -
+--td-button-default-disabled-color | @text-color-disabled | -
+--td-button-default-outline-active-bg-color | @bg-color-container-active | -
+--td-button-default-outline-active-border-color | @component-border | -
+--td-button-default-outline-border-color | @component-border | -
+--td-button-default-outline-color | @text-color-primary | -
+--td-button-default-outline-disabled-color | @component-border | -
+--td-button-default-text-active-bg-color | @bg-color-container-active | -
+--td-button-extra-small-font-size | @font-size-base | -
+--td-button-extra-small-height | 56rpx | -
+--td-button-extra-small-icon-size | 36rpx | -
+--td-button-extra-small-padding-horizontal | 16rpx | -
+--td-button-font-weight | 600 | -
+--td-button-ghost-border-color | @button-ghost-color | -
+--td-button-ghost-color | @text-color-anti | -
+--td-button-ghost-danger-border-color | @error-color | -
+--td-button-ghost-danger-color | @error-color | -
+--td-button-ghost-danger-hover-color | @error-color-active | -
+--td-button-ghost-disabled-color | @font-white-4 | -
+--td-button-ghost-hover-color | @font-white-2 | -
+--td-button-ghost-primary-border-color | @brand-color | -
+--td-button-ghost-primary-color | @brand-color | -
+--td-button-ghost-primary-hover-color | @brand-color-active | -
+--td-button-icon-border-radius | 8rpx | -
+--td-button-icon-spacer | @spacer | -
+--td-button-large-font-size | @font-size-m | -
+--td-button-large-height | 96rpx | -
+--td-button-large-icon-size | 48rpx | -
+--td-button-large-padding-horizontal | 40rpx | -
+--td-button-light-active-bg-color | @brand-color-light-active | -
+--td-button-light-active-border-color | @brand-color-light-active | -
+--td-button-light-bg-color | @brand-color-light | -
+--td-button-light-border-color | @brand-color-light | -
+--td-button-light-color | @brand-color | -
+--td-button-light-disabled-bg | @brand-color-light | -
+--td-button-light-disabled-border-color | @brand-color-light | -
+--td-button-light-disabled-color | @brand-color-disabled | -
+--td-button-light-outline-active-bg-color | @brand-color-light-active | -
+--td-button-light-outline-active-border-color | @brand-color-active | -
+--td-button-light-outline-bg-color | @brand-color-light | -
+--td-button-light-outline-border-color | @button-light-outline-color | -
+--td-button-light-outline-color | @brand-color | -
+--td-button-light-outline-disabled-color | @brand-color-disabled | -
+--td-button-light-text-active-bg-color | @bg-color-container-active | -
+--td-button-light-text-color | @brand-color | -
+--td-button-medium-font-size | @font-size-m | -
+--td-button-medium-height | 80rpx | -
+--td-button-medium-icon-size | 40rpx | -
+--td-button-medium-padding-horizontal | 32rpx | -
+--td-button-primary-active-bg-color | @brand-color-active | -
+--td-button-primary-active-border-color | @brand-color-active | -
+--td-button-primary-bg-color | @brand-color | -
+--td-button-primary-border-color | @brand-color | -
+--td-button-primary-color | @text-color-anti | -
+--td-button-primary-dashed-border-color | @button-primary-dashed-color | -
+--td-button-primary-dashed-color | @brand-color | -
+--td-button-primary-dashed-disabled-color | @brand-color-disabled | -
+--td-button-primary-disabled-bg | @brand-color-disabled | -
+--td-button-primary-disabled-border-color | @brand-color-disabled | -
+--td-button-primary-disabled-color | @text-color-anti | -
+--td-button-primary-outline-active-bg-color | @bg-color-container-active | -
+--td-button-primary-outline-active-border-color | @brand-color-active | -
+--td-button-primary-outline-border-color | @button-primary-outline-color | -
+--td-button-primary-outline-color | @brand-color | -
+--td-button-primary-outline-disabled-color | @brand-color-disabled | -
+--td-button-primary-text-active-bg-color | @bg-color-container-active | -
+--td-button-primary-text-color | @brand-color | -
+--td-button-primary-text-disabled-color | @brand-color-disabled | -
+--td-button-small-font-size | @font-size-base | -
+--td-button-small-height | 64rpx | -
+--td-button-small-icon-size | 36rpx | -
+--td-button-small-padding-horizontal | 24rpx | -