@digitalc/dxp-ui 0.0.1

package/es/assets/token.json

@@ -0,0 +1,239 @@
+{
+  "borderRadiusLg": 32,
+  "borderRadiusMd": 16,
+  "borderRadiusSm": 8,
+  "borderRadiusXl": 40,
+  "borderUpload": "[object Object]",
+  "borderWidthCta": 2,
+  "borderWidthHover": 1,
+  "borderWidthSelected": 2,
+  "borderWidthStandard": 1,
+  "borderWidthStrikeout": 2,
+  "colorBackgroundActive": "#4D28E8",
+  "colorBackgroundActiveInverse": "#E5FF17",
+  "colorBackgroundActiveWeak": "#EDE9FD",
+  "colorBackgroundActiveWeakInverse": "#F5FFC0",
+  "colorBackgroundCoachmark": "#4D28E8",
+  "colorBackgroundCta": "#4D28E8",
+  "colorBackgroundCtaInverse": "#E5FF17",
+  "colorBackgroundCtaInversePressed": "rgba(229,255,23,0.5)",
+  "colorBackgroundCtaPressed": "rgba(77,40,232,0.5)",
+  "colorBackgroundCtaSuccess": "#00B379",
+  "colorBackgroundDark": "#242328",
+  "colorBackgroundDark2": "#151518",
+  "colorBackgroundDisabled": "#DFDFE4",
+  "colorBackgroundFooter": "#F5F5F8",
+  "colorBackgroundHeader": "#3E20BA",
+  "colorBackgroundHover": "#EDE9FD",
+  "colorBackgroundHoverNeutral": "rgba(245,245,248,0.8)",
+  "colorBackgroundOverlay": "rgba(21,21,24,0.8)",
+  "colorBackgroundOverlayLight": "rgba(223,223,228,0.8)",
+  "colorBackgroundSelected": "#EDE9FD",
+  "colorBackgroundStandard": "#ffffff",
+  "colorBackgroundSubtle": "#F5F5F8",
+  "colorBackgroundSubtle2": "#EDE9FD",
+  "colorBackgroundWeak": "#BFBFC7",
+  "colorBorderActive": "#4D28E8",
+  "colorBorderActiveInverse": "#E5FF17",
+  "colorBorderBenchmark": "#3E20BA",
+  "colorBorderBenchmarkInverse": "#D5E516",
+  "colorBorderCta": "#4D28E8",
+  "colorBorderCtaInverse": "#E5FF17",
+  "colorBorderDisabled": "rgba(140,140,152,0.5)",
+  "colorBorderError": "#BD341C",
+  "colorBorderSelected": "#4D28E8",
+  "colorBorderStandard": "#BFBFC7",
+  "colorBorderStrikeout": "#DFDFE4",
+  "colorBorderStrikeoutInverse": "#ffffff",
+  "colorBorderStrong": "#8C8C98",
+  "colorBorderWeak": "#DFDFE4",
+  "colorBorderWeakInverse": "#ffffff",
+  "colorDivider": "#DFDFE4",
+  "colorGradientNeutral": "linear-gradient(180deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.00) 100%)",
+  "colorGraph1": "#0062F5",
+  "colorGraph2": "#FFB824",
+  "colorGraph3": "#FF5D76",
+  "colorGraph4": "#0CAA8F",
+  "colorGraph5": "#6699FF",
+  "colorGraph6": "#FFD47C",
+  "colorGraph7": "#FFD2D9",
+  "colorGraph8": "#6DCCBC",
+  "colorGraph9": "#151560",
+  "colorGraph10": "#FFEABD",
+  "colorGraph11": "#FCEAED",
+  "colorGraph12": "#B6E6DD",
+  "colorIconActive": "#8C8C98",
+  "colorIconAlert": "#BD341C",
+  "colorIconAlertInverse": "#ff5d76",
+  "colorIconBottomNavigationActive": "#4D28E8",
+  "colorIconBottomNavigationInactive": "#8C8C98",
+  "colorIconCta": "#4D28E8",
+  "colorIconCtaInverse": "#E5FF17",
+  "colorIconDisabled": "#DFDFE4",
+  "colorIconInactive": "#DFDFE4",
+  "colorIconInverse": "#ffffff",
+  "colorIconLink": "#4D28E8",
+  "colorIconLinkInverse": "#E5FF17",
+  "colorIconLoader": "#8C8C98",
+  "colorIconLocationPin": "#D01660",
+  "colorIconLocationPinActive": "#4D28E8",
+  "colorIconNeutral": "#242328",
+  "colorIconNotice": "#e71336",
+  "colorIconPending": "#FFB524",
+  "colorIconRating": "#FFB524",
+  "colorIconSubtle": "#8C8C98",
+  "colorIconSubtleInverse": "#DFDFE4",
+  "colorIconSuccess": "#00B379",
+  "colorIconWeak": "#BFBFC7",
+  "colorNotificationAlert": "#FDEAE7",
+  "colorNotificationDefault": "#EDE9FD",
+  "colorNotificationPromo": "#F5FFC0",
+  "colorRewards1": "#FFC9AA",
+  "colorRewards2": "#D4E6EC",
+  "colorRewards3": "#FEE8B6",
+  "colorRibbonPrimary": "#D01660",
+  "colorRibbonPrimary2": "#FFEAF2",
+  "colorRibbonPrimary3": "#D01660",
+  "colorRibbonPrimaryDark": "#D01660",
+  "colorRibbonSecondary": "#1482CC",
+  "colorRibbonSecondary2": "#E8F6FF",
+  "colorRibbonSecondaryDark": "#1482CC",
+  "colorTagPrimary": "#D01660",
+  "colorTagSecondary": "#1482CC",
+  "colorTextAlert": "#bc1430",
+  "colorTextCoachmark": "#ffffff",
+  "colorTextCta": "#4D28E8",
+  "colorTextCtaInverse": "#E5FF17",
+  "colorTextDisabled": "#8C8C98",
+  "colorTextHeaderActive": "#E5FF17",
+  "colorTextHeaderActiveInverse": "#ffffff",
+  "colorTextHeaderHighlight": "#151518",
+  "colorTextHeaderHighlightInverse": "#F5FFC0",
+  "colorTextInverse": "#ffffff",
+  "colorTextLabel": "#70707A",
+  "colorTextLink": "#4D28E8",
+  "colorTextLinkInverse": "#E5FF17",
+  "colorTextNavigationActive": "#4D28E8",
+  "colorTextNeutral": "#242328",
+  "colorTextStrikethrough": "#8C8C98",
+  "colorTextSubtle": "#70707A",
+  "colorTextSubtleInverse": "#DFDFE4",
+  "colorTextSuccess": "#00B379",
+  "colorToggleActiveStrong": "#4D28E8",
+  "colorToggleActiveWeak": "#ffffff",
+  "colorToggleInactiveStrong": "#DFDFE4",
+  "colorToggleInactiveWeak": "#ffffff",
+  "colorToggleIndicator": "rgba(34,34,34,0.05)",
+  "opacityDisabled": 0.5,
+  "opacityHover": 0.8,
+  "opacityOverlay": 0.8,
+  "opacityPressed": 0.5,
+  "opacitySubtle": 0.3,
+  "shadowHigh": {
+    "elevation": 0,
+    "shadowColor": "rgba(0, 0, 0, 0.10)",
+    "shadowOffset": {
+      "width": 0,
+      "height": 6
+    },
+    "shadowOpacity": 0.1,
+    "shadowRadius": 6
+  },
+  "shadowHighInverse": {
+    "elevation": 4,
+    "shadowColor": "rgba(0, 0, 0, 0.10)",
+    "shadowOffset": {
+      "width": 0,
+      "height": -6
+    },
+    "shadowOpacity": 0.1,
+    "shadowRadius": 8
+  },
+  "shadowLow": {
+    "elevation": 5,
+    "shadowColor": "#000000",
+    "shadowOffset": {
+      "width": 0,
+      "height": 4
+    },
+    "shadowOpacity": 0.1,
+    "shadowRadius": 5
+  },
+  "sizingBullet": 6,
+  "sizingBulletSm": 4,
+  "sizingCirclePatternLg": 242,
+  "sizingCirclePatternMd": 215,
+  "sizingCirclePatternSm": 188,
+  "sizingCirclePatternXs": 88,
+  "sizingColorList": 12,
+  "sizingFileInput": 218,
+  "sizingFileInputLg": 227,
+  "sizingIconGeneralLg": 40,
+  "sizingIconGeneralMd": 32,
+  "sizingIconGeneralSm": 24,
+  "sizingIconGeneralXl": 48,
+  "sizingIconGeneralXs": 16,
+  "sizingIconGeneralXs2": 20,
+  "sizingIconSpotLg": 72,
+  "sizingIconSpotMd": 64,
+  "sizingIconSpotSm": 56,
+  "sizingIconSpotXl": 80,
+  "sizingIconSpotXs": 48,
+  "sizingIconSpotXxl": 88,
+  "sizingIconUtilityLg": 40,
+  "sizingIconUtilityMd": 32,
+  "sizingIconUtilitySm": 24,
+  "sizingIconUtilityXs": 16,
+  "sizingIconUtilityXs2": 20,
+  "sizingIconUtilityXxs": 12,
+  "sizingImageLg": 56,
+  "sizingImageMd": 48,
+  "sizingImageSm": 40,
+  "sizingImageXl": 72,
+  "sizingImageXs": 32,
+  "sizingImageXxl": 104,
+  "sizingImageXxs": 24,
+  "sizingTagLg": 32,
+  "sizingTagMd": 24,
+  "sizingTagSm": 20,
+  "sizingTextBoxLg": 64,
+  "sizingTextBoxMd": 56,
+  "sizingTextBoxSm": 48,
+  "sizingTextBoxXs": 40,
+  "sizingTextBoxXxs": 24,
+  "sizingVoucherMd": 142,
+  "sizingVoucherSm": 104,
+  "spacingBulletMd": 10,
+  "spacingBulletSm": 9,
+  "spacingBulletXs": 7,
+  "spacingGapLg": 24,
+  "spacingGapMd": 16,
+  "spacingGapSm": 8,
+  "spacingGapSm2": 12,
+  "spacingGapXl": 32,
+  "spacingGapXs": 4,
+  "spacingGapXxl": 40,
+  "spacingGapXxxl": 64,
+  "spacingIconLg": 24,
+  "spacingIconMd": 16,
+  "spacingIconSm": 8,
+  "spacingIconXs": 4,
+  "spacingIconXxs": 1.50,
+  "spacingImageLg": 24,
+  "spacingImageMd": 16,
+  "spacingImageSm": 8,
+  "spacingImageXs": 4,
+  "spacingInputMd": 16,
+  "spacingInputMd2": 20,
+  "spacingInputMd3": 22.5,
+  "spacingInputSm": 8,
+  "spacingInputSm2": 11,
+  "spacingInputSm3": 12,
+  "spacingInputXs": 4,
+  "spacingTextLg": 24,
+  "spacingTextMd": 16,
+  "spacingTextSm": 8,
+  "spacingTextXl": 32,
+  "spacingTextXs": 4,
+  "spacingTextXxl": 40
+}

package/es/components/Button/designTokens.d.ts

@@ -0,0 +1,66 @@
+declare const designTokens: {
+    colorPrimary: any;
+    colorPrimaryHover: any;
+    colorPrimaryActive: any;
+    primaryColor: any;
+    defaultColor: any;
+    defaultBorderColor: any;
+    colorBgContainerDisabled: any;
+    borderColorDisabled: any;
+    colorTextDisabled: any;
+    green1: any;
+    green2: any;
+    green3: any;
+    green4: any;
+    green5: any;
+    green6: any;
+    green7: any;
+    borderRadius: any;
+    borderRadiusSM: any;
+    borderRadiusLG: any;
+    defaultShadow: string;
+    primaryShadow: string;
+    lineWidth: any;
+    textTextColor: any;
+    paddingInline: any;
+    paddingInlineSM: any;
+    paddingInlineLG: any;
+    paddingBlock: any;
+    paddingBlockSM: any;
+    paddingBlockLG: any;
+};
+declare const inverseDesignTokens: {
+    colorPrimary: any;
+    colorPrimaryHover: any;
+    colorPrimaryActive: any;
+    primaryColor: any;
+    defaultBg: string;
+    defaultHoverBg: string;
+    defaultActiveBg: string;
+    defaultColor: any;
+    defaultBorderColor: any;
+    colorBgContainerDisabled: any;
+    borderColorDisabled: any;
+    colorTextDisabled: any;
+    green1: any;
+    green2: any;
+    green3: any;
+    green4: any;
+    green5: any;
+    green6: any;
+    green7: any;
+    borderRadius: any;
+    borderRadiusSM: any;
+    borderRadiusLG: any;
+    defaultShadow: string;
+    primaryShadow: string;
+    lineWidth: any;
+    textTextColor: any;
+    paddingInline: any;
+    paddingInlineSM: any;
+    paddingInlineLG: any;
+    paddingBlock: any;
+    paddingBlockSM: any;
+    paddingBlockLG: any;
+};
+export { designTokens, inverseDesignTokens };

package/es/components/Button/designTokens.js

@@ -0,0 +1,131 @@
+import { getToken } from "../../utils/tokenHelper";
+/*
+这里是 dxp 的 UI token，缓存在本地的内置变量；
+通过antd 提供的 ConfigProvider 注入了组件级 token 变量来实现 gomo 风格的UI组件；
+
+理论上可以通过2种方式来实现 antd 的样式定制：
+1. 直接写 /components/Button/style/button.less 文件通过 less 覆盖antd的样式，可控细节更多（相当于把  dxp 的 UI token 通过 less 的方式覆盖antd的样式）；
+2. 通过 ConfigProvider 注入组件级别的 token 变量，这种不用写 less 文件，但是可控细节更少，只能antd 提供了哪些 token，才能覆盖对应的值；
+目前优先选择第二种，因为第一种需要写 less 文件，要知道对应组件的dom结构，才能覆盖；而第二种只需要对齐 变量值，就能覆盖；
+*/
+var designTokens = {
+  // 算法配置
+  // algorithm: true,
+
+  // 主要按钮背景色
+  colorPrimary: getToken('colorButtonBackgroundPrimary'),
+  // 主要按钮 Hover todo
+  colorPrimaryHover: getToken('colorButtonBackgroundPrimary'),
+  colorPrimaryActive: getToken('colorButtonBackgroundPrimary'),
+  // colorPrimaryBg: getToken('colorButtonBackgroundPrimary'),
+  // 主要按钮文本颜色
+  primaryColor: getToken('colorButtonTextPrimary'),
+  // 次要按钮背景色 默认是白色
+  // 次要按钮文本颜色
+  defaultColor: getToken('colorButtonTextSecondary'),
+  // 次要按钮边框颜色
+  defaultBorderColor: getToken('colorButtonTextSecondary'),
+  // 禁用按钮背景色 Hover
+  colorBgContainerDisabled: getToken('colorButtonBackgroundPrimaryDisable'),
+  borderColorDisabled: getToken('colorButtonBackgroundPrimaryDisable'),
+  colorTextDisabled: getToken('colorButtonTextDisabled'),
+  // Success 按钮背景色
+  green1: getToken('colorButtonBackgroundSuccess'),
+  green2: getToken('colorButtonBackgroundSuccess'),
+  green3: getToken('colorButtonBackgroundSuccess'),
+  green4: getToken('colorButtonBackgroundSuccess'),
+  green5: getToken('colorButtonBackgroundSuccess'),
+  green6: getToken('colorButtonBackgroundSuccess'),
+  green7: getToken('colorButtonBackgroundSuccess'),
+  // Inverse 反色配置 token配置不出来，用 inverse 判断处理。
+  // ghostBg: getToken('colorButtonBackgroundPrimaryInverse'),
+  // defaultGhostBorderColor: getToken('colorButtonBackgroundPrimaryInverse'),
+  // groupBorderColor: getToken('colorButtonBackgroundPrimaryInverse'),
+  // // 文本按钮的
+  // defaultGhostColor: getToken('colorButtonTextPrimaryInverse'),
+  // Inverse 反色配置 end
+
+  // 全局公用的：
+  // 按钮圆角
+  borderRadius: getToken('borderRadiusButton'),
+  borderRadiusSM: getToken('borderRadiusButton'),
+  borderRadiusLG: getToken('borderRadiusButton'),
+  defaultShadow: '0 0px 0 rgba(0,0,0,0.02)',
+  primaryShadow: '0 0 0 rgba(5,145,255,0.1)',
+  // todo gFontFamilySecondaryBold: String = "Roboto"
+  // todo fontWeight700: Font.Weight = .bold 改用 text 组件实现
+  // fontWeight: getToken(''),
+  // fontfamily: getToken(''),
+
+  // 边框宽度
+  lineWidth: getToken('borderWidthButtonSecondary'),
+  // 默认文本按钮的文本色
+  textTextColor: getToken('colorButtonTextSecondary'),
+  // 按钮内间距
+  paddingInline: getToken('spacingButtonPaddingHorizontal'),
+  paddingInlineSM: getToken('spacingButtonPaddingHorizontal'),
+  paddingInlineLG: getToken('spacingButtonPaddingHorizontal'),
+  paddingBlock: getToken('spacingButtonPaddingVertical'),
+  paddingBlockSM: getToken('spacingButtonPaddingVertical'),
+  paddingBlockLG: getToken('spacingButtonPaddingVertical')
+};
+var inverseDesignTokens = {
+  // 算法配置
+  // algorithm: true,
+
+  // 主要按钮背景色
+  colorPrimary: getToken('colorButtonBackgroundPrimaryInverse'),
+  // 主要按钮 Hover
+  colorPrimaryHover: getToken('colorButtonBackgroundPrimaryInverse'),
+  colorPrimaryActive: getToken('colorButtonBackgroundPrimaryInverse'),
+  // 主要按钮 Active
+  // colorPrimaryBg: getToken('colorButtonBackgroundPrimaryInverse'),
+  // 主要按钮文本颜色
+  primaryColor: getToken('colorButtonTextPrimaryInverse'),
+  // 次要按钮背景色 默认是白色
+  defaultBg: "rgba(255,255,255,0)",
+  defaultHoverBg: "rgba(255,255,255,0)",
+  defaultActiveBg: "rgba(255,255,255,0)",
+  // 次要按钮文本颜色
+  defaultColor: getToken('colorButtonTextSecondaryInverse'),
+  // 次要按钮边框颜色
+  defaultBorderColor: getToken('colorButtonSecondaryBorderInverse'),
+  // 禁用按钮背景色 Hover
+  colorBgContainerDisabled: getToken('colorButtonBackgroundPrimaryDisable'),
+  borderColorDisabled: getToken('colorButtonBackgroundPrimaryDisable'),
+  colorTextDisabled: getToken('colorButtonTextDisabled'),
+  // Success 按钮背景色
+  green1: getToken('colorButtonBackgroundSuccess'),
+  green2: getToken('colorButtonBackgroundSuccess'),
+  green3: getToken('colorButtonBackgroundSuccess'),
+  green4: getToken('colorButtonBackgroundSuccess'),
+  green5: getToken('colorButtonBackgroundSuccess'),
+  green6: getToken('colorButtonBackgroundSuccess'),
+  green7: getToken('colorButtonBackgroundSuccess'),
+  // 全局公用的：
+  // 按钮圆角
+  borderRadius: getToken('borderRadiusButton'),
+  borderRadiusSM: getToken('borderRadiusButton'),
+  borderRadiusLG: getToken('borderRadiusButton'),
+  defaultShadow: '0 0px 0 rgba(0,0,0,0.02)',
+  primaryShadow: '0 0 0 rgba(5,145,255,0.1)',
+  // todo gFontFamilySecondaryBold: String = "Roboto"
+  // todo fontWeight700: Font.Weight = .bold 改用 text 组件实现
+  // fontWeight: getToken(''),
+  // fontfamily: getToken(''),
+
+  // 边框宽度
+  lineWidth: getToken('borderWidthButtonSecondary'),
+  // 默认文本按钮的文本色
+  textTextColor: getToken('colorButtonTextSecondary'),
+  // 按钮内间距
+  paddingInline: getToken('spacingButtonPaddingHorizontal'),
+  paddingInlineSM: getToken('spacingButtonPaddingHorizontal'),
+  paddingInlineLG: getToken('spacingButtonPaddingHorizontal'),
+  paddingBlock: getToken('spacingButtonPaddingVertical'),
+  paddingBlockSM: getToken('spacingButtonPaddingVertical'),
+  paddingBlockLG: getToken('spacingButtonPaddingVertical')
+};
+
+// export default designTokens;
+export { designTokens, inverseDesignTokens };

package/es/components/Button/index.d.ts

@@ -0,0 +1,44 @@
+import React, { PureComponent } from 'react';
+import { noop } from '../../utils/noop';
+import './style/button.less';
+export type HtmlType = 'button' | 'reset' | 'submit';
+export type Size = 'middle' | 'small' | 'large';
+export type ButtonType = 'primary' | 'default' | 'dashed' | 'link' | 'text';
+export type ButtonColorType = 'default' | 'primary' | 'danger' | 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
+export type fontSize = 'bannerTitle' | 'pageTitle' | 'sectionTitle' | 'header' | 'bodyBold' | 'bodyRegular' | 'bodyStrikethrough' | 'smallbodyRegular' | 'smallBodyStrikethrough' | 'smallBodySemiBold' | 'smallBodyBold' | 'smallBodyLink' | 'textLink' | 'mediumBody' | 'mediumBodyBold';
+export interface xDXpProps {
+    'x-dxp-prop'?: string;
+}
+export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'color'> {
+    type?: ButtonType;
+    color?: ButtonColorType;
+    inverse?: boolean;
+    loading?: boolean;
+    htmlType?: HtmlType;
+    size?: Size;
+    fontSize?: fontSize;
+    disabled?: boolean;
+    block?: boolean;
+    style?: React.CSSProperties;
+    theme?: string;
+    prefixCls?: string;
+    'aria-label'?: React.AriaAttributes['aria-label'];
+    contentClassName?: string;
+    [key: string]: any;
+}
+export default class Button extends PureComponent<ButtonProps> {
+    static defaultProps: {
+        disabled: boolean;
+        size: string;
+        fontSize: string;
+        type: string;
+        theme: string;
+        htmlType: string;
+        onMouseDown: typeof noop;
+        onClick: typeof noop;
+        onMouseEnter: typeof noop;
+        onMouseLeave: typeof noop;
+        prefixCls: string;
+    };
+    render(): React.JSX.Element;
+}

package/es/components/Button/index.js

@@ -0,0 +1,92 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+var _excluded = ["fontSize", "theme", "inverse"];
+import { Button as AntdBtn, ConfigProvider } from 'antd';
+import React, { PureComponent } from 'react';
+import { cssClasses } from "../../constants";
+import { noop } from "../../utils/noop";
+import Text from "../Text";
+import { designTokens, inverseDesignTokens } from "./designTokens";
+
+// 这种是另一方 定制 antd 的 style 的方式； 现在使用了上面的 designTokens.ts 的方式。
+import "./style/button.less";
+
+// const { htmlTypes, btnTypes, sizes } = strings;
+
+// export type Theme = 'solid' | 'borderless' | 'light' | 'outline';
+var Button = /*#__PURE__*/function (_PureComponent) {
+  _inherits(Button, _PureComponent);
+  var _super = _createSuper(Button);
+  function Button() {
+    _classCallCheck(this, Button);
+    return _super.apply(this, arguments);
+  }
+  _createClass(Button, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        children = _this$props.children,
+        style = _this$props.style,
+        inverse = _this$props.inverse,
+        fontSize = _this$props.fontSize;
+
+      // Filter out fontSize from props to avoid passing it to AntdBtn
+      // const { fontSize: _, ...filteredProps } = this.props;
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      var _this$props2 = this.props,
+        _ = _this$props2.fontSize,
+        __ = _this$props2.theme,
+        ___ = _this$props2.inverse,
+        filteredProps = _objectWithoutProperties(_this$props2, _excluded);
+
+      // todo : 临时处理，后续需要调整取值
+      var baseStyle = {
+        minWidth: '128px',
+        paddingTop: '8px',
+        paddingBottom: '8px'
+      };
+      var btnStyle = _objectSpread(_objectSpread({}, baseStyle), style);
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ConfigProvider, {
+        wave: {
+          disabled: true
+        }
+        // prefixCls={cssClasses.PREFIX}
+        ,
+        theme: {
+          // 这个外层的 Seed Token，影响范围大。
+          // token: designTokens,
+          components: {
+            Button: _objectSpread({}, inverse ? inverseDesignTokens : designTokens)
+          },
+          cssVar: true,
+          hashed: false
+        }
+      }, /*#__PURE__*/React.createElement(AntdBtn, _extends({}, filteredProps, {
+        style: btnStyle
+      }), /*#__PURE__*/React.createElement(Text, {
+        size: fontSize
+      }, children))));
+    }
+  }]);
+  return Button;
+}(PureComponent);
+_defineProperty(Button, "defaultProps", {
+  disabled: false,
+  size: 'large',
+  fontSize: 'bodyBold',
+  type: 'default',
+  theme: 'light',
+  htmlType: 'button',
+  onMouseDown: noop,
+  onClick: noop,
+  onMouseEnter: noop,
+  onMouseLeave: noop,
+  prefixCls: cssClasses.PREFIX + '-button'
+});
+export { Button as default };

package/es/components/Button/index_backup.d.ts

@@ -0,0 +1,72 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { noop } from '../../utils/noop';
+import './style/button.less';
+export type HtmlType = 'button' | 'reset' | 'submit';
+export type Size = 'default' | 'small' | 'large';
+export type Theme = 'solid' | 'borderless' | 'light' | 'outline';
+export type Type = 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger';
+export interface xDXpProps {
+    'x-dxp-prop'?: string;
+}
+export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+    id?: string;
+    type?: Type;
+    icon?: React.ReactNode;
+    block?: boolean;
+    circle?: boolean;
+    children?: React.ReactNode;
+    disabled?: boolean;
+    className?: string;
+    iconPosition?: 'left' | 'right';
+    loading?: boolean;
+    htmlType?: HtmlType;
+    size?: Size;
+    style?: React.CSSProperties;
+    theme?: Theme;
+    prefixCls?: string;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    onMouseDown?: React.MouseEventHandler<HTMLButtonElement>;
+    onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;
+    'aria-label'?: React.AriaAttributes['aria-label'];
+    'x-dxp-children-alias'?: string;
+    contentClassName?: string;
+    [key: string]: any;
+}
+export default class Button extends PureComponent<ButtonProps> {
+    static defaultProps: {
+        disabled: boolean;
+        size: string;
+        type: string;
+        theme: string;
+        block: boolean;
+        htmlType: string;
+        onMouseDown: typeof noop;
+        onClick: typeof noop;
+        onMouseEnter: typeof noop;
+        onMouseLeave: typeof noop;
+        prefixCls: string;
+    };
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        disabled: PropTypes.Requireable<boolean>;
+        prefixCls: PropTypes.Requireable<string>;
+        style: PropTypes.Requireable<object>;
+        size: PropTypes.Requireable<"default" | "small" | "large">;
+        type: PropTypes.Requireable<"primary" | "secondary" | "tertiary" | "warning" | "danger">;
+        block: PropTypes.Requireable<boolean>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onMouseDown: PropTypes.Requireable<(...args: any[]) => any>;
+        circle: PropTypes.Requireable<boolean>;
+        loading: PropTypes.Requireable<boolean>;
+        htmlType: PropTypes.Requireable<"button" | "reset" | "submit">;
+        theme: PropTypes.Requireable<"solid" | "borderless" | "light" | "outline">;
+        className: PropTypes.Requireable<string>;
+        onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
+        onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
+        'aria-label': PropTypes.Requireable<string>;
+        contentClassName: PropTypes.Requireable<string>;
+    };
+    render(): React.JSX.Element;
+}