List components #31

Open
stne3960 wants to merge 57 commits from list_item into main
Showing only changes of commit 6a9f8ed9af - Show all commits

View File

@ -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,