@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
153 lines • 4.89 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { cva, css as designCss } from '@reservoir0x/relay-design-system/css';
import { forwardRef } from 'react';
const ButtonCss = cva({
base: {
cursor: 'pointer',
outline: 'none',
fontFamily: 'body',
fontWeight: 700,
fontSize: 16,
transition: 'background-color 250ms linear',
gap: '2',
display: 'inline-flex',
alignItems: 'center',
lineHeight: '20px',
'--focusColor': 'colors.focus-color',
_focusVisible: {
boxShadow: '0 0 0 2px var(--focusColor)'
},
_disabled: {
cursor: 'not-allowed',
backgroundColor: 'button-disabled-background',
color: 'button-disabled-color',
_hover: {
backgroundColor: 'button-disabled-background',
color: 'button-disabled-color'
}
}
},
variants: {
color: {
primary: {
backgroundColor: 'primary-button-background',
color: 'primary-button-color',
'&:hover': {
backgroundColor: 'primary-button-hover-background',
color: 'primary-button-hover-color'
}
},
primaryOutline: {
backgroundColor: 'transparent',
color: 'gray12',
'--border-color': 'primary-outline-button-color',
border: '1px solid var(--border-color)',
'&:hover': {
color: 'primary-outline-button-hover-color'
}
},
secondary: {
backgroundColor: 'secondary-button-background',
color: 'secondary-button-color',
'&:hover': {
backgroundColor: 'secondary-button-hover-background',
color: 'secondary-button-hover-color'
}
},
tertiary: {
backgroundColor: 'tertiary-button-background',
color: 'tertiary-button-color',
'&:hover': {
backgroundColor: 'tertiary-button-hover-background',
color: 'tertiary-button-hover-color'
}
},
ghost: {
color: 'text-default',
backgroundColor: 'transparent'
},
white: {
'--borderColor': 'colors.subtle-border-color',
backgroundColor: 'widget-background',
transition: 'filter 250ms linear',
'&:hover': {
filter: 'brightness(97%)'
},
border: '1px solid var(--borderColor)'
},
error: {
backgroundColor: 'red9',
color: 'white',
'&:hover': {
backgroundColor: 'red10'
}
},
warning: {
backgroundColor: 'amber3',
color: 'amber11',
'&:hover': {
backgroundColor: 'amber4',
color: 'amber11'
}
},
grey: {
backgroundColor: 'gray3',
color: 'gray11',
'&:hover': {
backgroundColor: 'gray4'
}
}
},
corners: {
square: {
borderRadius: 0
},
rounded: {
borderRadius: 8
},
pill: {
borderRadius: 99999
},
circle: {
borderRadius: '99999px',
alignItems: 'center',
justifyContent: 'center'
}
},
size: {
none: {},
xs: {
p: '3',
lineHeight: '16px',
minHeight: 40
},
small: {
px: '3',
py: '2',
lineHeight: '12px',
minHeight: 40
},
medium: {
px: '5',
py: '3',
minHeight: 44
},
large: {
px: '5',
py: '4',
minHeight: 52
}
}
},
defaultVariants: {
color: 'primary',
corners: 'rounded',
size: 'medium'
}
});
const Button = forwardRef(({ css, children, ...props }, forwardedRef) => {
const { color, size, corners, ...buttonProps } = { ...props };
return (_jsx("button", { ...buttonProps, ref: forwardedRef, className: designCss(ButtonCss.raw({ color, size, corners }), designCss.raw(css)), children: children }));
});
export default Button;
//# sourceMappingURL=Button.js.map