ci4sManagement-cloud/react-ui/src/components/KFButton/index.tsx

import themes from '@/styles/theme.less';
import { addAlpha, derivePrimaryStates } from '@/utils/color';
import { Button, ButtonProps } from 'antd';
import { createStyles } from 'antd-style';
import './index.less';

type KFColor = 'primary' | 'default' | 'danger';

export interface KFButtonProps extends ButtonProps {
  kfColor?: KFColor;
}

const useStyles = createStyles(({ token, css }) => ({
  primary: css`
    color: ${token.colorPrimary} !important;
    background-color: ${addAlpha(themes['primaryColor'], 0.07)} !important;

    &:hover {
      color: ${token.colorPrimaryHover} !important;
    }

    &:active {
      color: ${token.colorPrimaryActive} !important;
    }
  `,
  default: css`
    color: ${themes['textColorSecondary']} !important;
    background-color: ${addAlpha(themes['textColorSecondary'], 0.07)} !important;

    &:hover {
      color: ${derivePrimaryStates(themes['textColorSecondary']).colorPrimaryHover} !important;
    }

    &:active {
      color: ${derivePrimaryStates(themes['textColorSecondary']).colorPrimaryActive} !important;
    }
  `,
  danger: css`
    color: ${themes['errorColor']} !important;
    background-color: ${addAlpha(themes['errorColor'], 0.07)} !important;

    &:hover {
      color: ${derivePrimaryStates(themes['errorColor']).colorPrimaryHover} !important;
    }

    &:active {
      color: ${derivePrimaryStates(themes['errorColor']).colorPrimaryActive} !important;
    }
  `,
}));

function KFButton({ kfColor = 'default', className, ...rest }: KFButtonProps) {
  const { styles, cx } = useStyles();

  let style = '';
  switch (kfColor) {
    case 'primary':
      style = styles.primary;
      break;
    case 'default':
      style = styles.default;
      break;
    case 'danger':
      style = styles.danger;
      break;
    default:
      break;
  }

  return (
    <Button {...rest} className={cx(className, style)} color={kfColor} variant="link"></Button>
  );
}

export default KFButton;