generated from gc/template-java-maven
HYOJIN
c2a71c1b77
- 디자인 시스템 가이드 문서 11개 생성 (docs/design/) - CSS 변수 토큰 시스템 (@theme + :root/.dark 전환) - cn() 유틸리티 (clsx + tailwind-merge) - Button/Badge 공통 컴포넌트 (variant/size, 다크모드 대응) - 하드코딩 Tailwind 색상 → CSS 변수 토큰 리팩토링 (30개 파일) - 차트 팔레트 다크모드 색상 업데이트 (CHART_COLORS_HEX) - 버튼 다크모드 채도/대비 강화 (primary-600 기반) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
56 lines
2.4 KiB
TypeScript
56 lines
2.4 KiB
TypeScript
import { forwardRef } from 'react';
|
|
import { cn } from '../../utils/cn';
|
|
|
|
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
variant?: 'primary' | 'secondary' | 'accent' | 'outline' | 'ghost' | 'danger';
|
|
size?: 'sm' | 'md' | 'lg';
|
|
}
|
|
|
|
const variantStyles = {
|
|
primary:
|
|
'bg-[var(--color-primary)] text-white hover:bg-[var(--color-primary-hover)] active:bg-[var(--color-primary-active)]' +
|
|
' dark:bg-[var(--color-primary-600)] dark:hover:bg-[var(--color-primary-500)]',
|
|
secondary:
|
|
'bg-[var(--color-secondary)] text-[var(--color-secondary-text)] hover:bg-[var(--color-secondary-hover)] active:bg-[var(--color-secondary-active)]' +
|
|
' dark:bg-[var(--color-secondary-700)] dark:text-white dark:hover:bg-[var(--color-secondary-600)]',
|
|
accent:
|
|
'bg-[var(--color-accent)] text-[var(--color-accent-text)] hover:bg-[var(--color-accent-hover)] active:bg-[var(--color-accent-active)]' +
|
|
' dark:bg-[var(--color-accent-600)] dark:text-white dark:hover:bg-[var(--color-accent-500)]',
|
|
outline:
|
|
'border border-[var(--color-border-strong)] text-[var(--color-text-primary)] hover:bg-[var(--color-primary-subtle)] bg-transparent' +
|
|
' dark:border-[var(--color-primary-400)] dark:text-[var(--color-primary-300)] dark:hover:bg-[var(--color-primary-600)]/15',
|
|
ghost:
|
|
'text-[var(--color-text-secondary)] hover:bg-[var(--color-primary-subtle)] bg-transparent' +
|
|
' dark:text-[var(--color-primary-300)] dark:hover:bg-[var(--color-primary-600)]/12',
|
|
danger:
|
|
'bg-[var(--color-danger)] text-white hover:opacity-90' +
|
|
' dark:bg-red-500 dark:hover:bg-red-600 dark:hover:opacity-100',
|
|
};
|
|
|
|
const sizeStyles = {
|
|
sm: 'h-8 px-3 text-xs gap-1.5',
|
|
md: 'h-10 px-4 text-sm gap-2',
|
|
lg: 'h-12 px-6 text-base gap-2',
|
|
};
|
|
|
|
const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
|
({ variant = 'primary', size = 'md', className, disabled, children, ...props }, ref) => (
|
|
<button
|
|
ref={ref}
|
|
disabled={disabled}
|
|
className={cn(
|
|
'inline-flex items-center justify-center rounded-lg font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/30',
|
|
'disabled:opacity-50 disabled:cursor-not-allowed',
|
|
variantStyles[variant],
|
|
sizeStyles[size],
|
|
className,
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</button>
|
|
),
|
|
);
|
|
Button.displayName = 'Button';
|
|
export default Button;
|