1
$ yarn add aelf-design

1
import { Button } from 'aelf-design';
2

3
const App = () => {
4
  return (
5
    <div>
6
      <Button>default</Button>
7
    </div>
8
  );
9
};
10

11
export default App;

1
$ git clone https://github.com/AElfProject/aelf-design.git
2
$ pnpm i (if there is not pnpm，please npm install -g pnpm first)
3
$ pnpm dev

1
$ pnpm release

1
import { Button, ConfigProvider, Space } from 'antd';
2
import React from 'react';
3

4
const App: React.FC = () => (
5
  <ConfigProvider
6
    theme={{
7
      token: {
8
        colorPrimary: '#00b96b',
9
        borderRadius: 2,
10
      },
11
    }}
12
  >
13
    <Space>
14
      <Button type="primary">Primary</Button>
15
      <Button>Default</Button>
16
    </Space>
17
  </ConfigProvider>
18
);
19

20
export default App;

1
import { Button, ConfigProvider, Space } from 'antd';
2
import React from 'react';
3

4
const App: React.FC = () => (
5
  <ConfigProvider
6
    theme={{
7
        components: {
8
          Button: {
9
            colorPrimary: '#00b96b',
10
            borderColorDisabled: '#d9d9d9'
11
          },
12
          Input: {
13
            colorPrimary: '#eb2f96',
14
          }
15
        },
16
    }}
17
  >
18
    <Space>
19
      <Button type="primary">Primary</Button>
20
      <Button>Default</Button>
21
    </Space>
22
  </ConfigProvider>
23
);
24

25
export default App;

1
import { SmileOutlined } from '@ant-design/icons';
2
import { Button, Space } from 'antd';
3
import { createStyles } from 'antd-style';
4

5
const useStyles = createStyles(({ token, css, cx }) => {
6
  const commonCard = css`
7
    border-radius: ${token.borderRadiusLG}px;
8
    padding: ${token.paddingLG}px;
9
  `;
10

11
  return {
12
    container: css`
13
      background-color: ${token.colorBgLayout};
14
      padding: 24px;
15
    `,
16

17
    defaultCard: css`
18
      ${commonCard};
19
      background: ${token.colorBgContainer};
20
      color: ${token.colorText};
21
    `,
22

23
    primaryCard: cx(
24
      commonCard,
25
      css`
26
        background: ${token.colorPrimary};
27
        color: ${token.colorTextLightSolid};
28
      `,
29
    ),
30
  };
31
});
32

33
const App = () => {
34
  const { styles } = useStyles();
35

36
  return (
37
    <div className={styles.container}>
38
      <Space direction={'vertical'} style={{ width: '100%' }} size={16}>
39
        <Space>
40
          <Button icon={<SmileOutlined />} />
41
          oprerate button
42
        </Space>
43
        <div className={styles.defaultCard}>defalut card</div>
44
        <div className={styles.primaryCard}>primary card</div>
45
      </Space>
46
    </div>
47
  );
48
};
49

50
export default App;

1
type GetCssStyleFn = (utils: CreateStylesUtils, props?: Props) => StyleInput;

1
import { ThemeProvider } from 'antd-style';
2

3
export default () => {
4
  return (
5
    <ThemeProvider customToken={{ customBrandColor: '#c956df' }}>
6
      <App />
7
    </ThemeProvider>
8
  );
9
};
10

11
// consume customToken
12
css`
13
  background-color: ${token.customBrandColor};
14
  padding: 24px;
15
`

1
<ThemeProvider
2
    customToken={{ customBrandColor: '#c956df' }}
3
    theme={{
4
        components: {
5
          Button: {
6
            colorPrimary: '#00b96b',
7
            borderColorDisabled: '#d9d9d9'
8
          },
9
          Input: {
10
            paddingBlock: 11,
11
            paddingBlockSM: 7,
12
          }
13
          ...
14
        },
15
        token: {
16
            colorPrimary: '#1370DD',
17
            colorPrimaryHover: '#3689DD',
18
        }
19
    }}
20
/>
21

22

23
theme?: ThemeConfig | GetAntdTheme;

1
export type AelfdButtonSizeType =
2
  | 'mini'
3
  | 'small'
4
  | 'medium'
5
  | 'large'
6
  | 'ultra'
7
export interface IAelfdButtonProps
8
  extends Omit<ButtonProps, 'size' | 'onClick'> {
9
  size?: AelfdButtonSizeType
10
  onClick?: React.MouseEventHandler<HTMLElement>
11
  millisecondOfThrottle?: number
12
}

1
const useStyles = createStyles(
2
  ({ css, prefixCls }, { size }: { size: AelfdButtonSizeType }) => {
3
    const dynamicWidth =
4
      size === 'mini'
5
        ? '24px'
6
        : size === 'small'
7
        ? '32px'
8
        : size === 'medium'
9
        ? '40px'
10
        : size === 'large'
11
        ? '48px'
12
        : '56px'
13

14
    return {
15
      buttonWrap: css`
16
        display: flex;
17
        align-items: center;
18
        justify-content: center;
19
        flex-shrink: 0;
20
        // ...
21

22
        &.${prefixCls}-btn-circle {
23
          min-height: ${dynamicWidth};
24
          height: ${dynamicWidth};
25
          font-size: 14px;
26
        }
27
        &.${prefixCls}-btn-icon-only {
28
          min-width: auto;
29
          width: ${dynamicWidth};
30
        }
31
      `
32
    }
33
  }
34
)