List components #31
@ -10,16 +10,16 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
}
|
||||
|
||||
const variantClasses: Record<ButtonVariant, string> = {
|
||||
primary: 'bg-primary text-base-canvas border border-primary hover:bg-secondary hover:text-base-canvas hover:border-primary focus:bg-base-canvas focus:text-base-ink-strong focus:border-primary focus:outline focus:outline-sky-100',
|
||||
secondary: 'bg-base-canvas text-base-ink-strong border border-base-ink-soft hover:bg-base-canvas hover:text-base-ink-strong hover:border-base-ink-medium focus:bg-base-canvas focus:text-base-ink-strong focus:border-primary focus:outline focus:outline-sky-100',
|
||||
red: 'bg-other-red-100 text-su-white border border-other-red-100 focus:bg-base-canvas focus:text-base-ink-strong focus:border-primary focus:outline focus:outline-sky-100',
|
||||
green: 'bg-other-green text-su-white border border-other-green focus:bg-base-canvas focus:text-base-ink-strong focus:border-primary focus:outline focus:outline-sky-100',
|
||||
primary: 'bg-primary text-base-canvas border border-primary hover:bg-secondary hover:text-base-canvas hover:border-primary focus-visible:bg-base-canvas focus-visible:text-base-ink-strong focus-visible:border-primary focus-visible:outline focus-visible:outline-[length:var(--border-width-lg)] focus-visible:outline-sky-100',
|
||||
secondary: 'bg-base-canvas text-base-ink-strong border border-base-ink-soft hover:bg-base-canvas hover:text-base-ink-strong hover:border-base-ink-medium focus-visible:bg-base-canvas focus-visible:text-base-ink-strong focus-visible:border-primary focus-visible:outline focus-visible:outline-[length:var(--border-width-lg)] focus-visible:outline-sky-100',
|
||||
red: 'bg-other-red-100 text-su-white border border-other-red-100 focus-visible:bg-base-canvas focus-visible:text-base-ink-strong focus-visible:border-primary focus-visible:outline focus-visible:outline-[length:var(--border-width-lg)] focus-visible:outline-sky-100',
|
||||
green: 'bg-other-green text-su-white border border-other-green focus-visible:bg-base-canvas focus-visible:text-base-ink-strong focus-visible:border-primary focus-visible:outline focus-visible:outline-[length:var(--border-width-lg)] focus-visible:outline-sky-100',
|
||||
};
|
||||
|
||||
const sizeClasses: Record<ButtonSize, string> = {
|
||||
sm: 'h-(--control-height-sm) min-w-(--button-min-width-sm) px-(--button-padding-x-sm) text-body-md rounded-(--border-radius-sm)',
|
||||
md: 'h-(--control-height-md) min-w-(--button-min-width-md) px-(--button-padding-x-md) text-body-md rounded-(--border-radius-sm)',
|
||||
lg: 'h-(--control-height-lg) min-w-(--button-min-width-lg) px-(--button-padding-x-lg) text-body-lg rounded-(--border-radius-md)',
|
||||
sm: 'h-(--control-height-sm) min-w-(--button-min-width-sm) px-(--button-padding-x-sm) body-normal-md rounded-(--border-radius-sm)',
|
||||
md: 'h-(--control-height-md) min-w-(--button-min-width-md) px-(--button-padding-x-md) body-normal-md rounded-(--border-radius-sm)',
|
||||
lg: 'h-(--control-height-lg) min-w-(--button-min-width-lg) px-(--button-padding-x-lg) body-normal-lg rounded-(--border-radius-md)',
|
||||
};
|
||||
|
||||
const textPaddingClasses: Record<ButtonSize, string> = {
|
||||
@ -35,7 +35,7 @@ export default function Button({
|
||||
children,
|
||||
...props
|
||||
}: ButtonProps) {
|
||||
const baseClasses = 'inline-flex items-center justify-center font-semibold';
|
||||
const baseClasses = 'inline-flex items-center justify-center cursor-pointer';
|
||||
|
||||
const classes = [
|
||||
baseClasses,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user