Claude
8c0cfd3b0c
Brings in the token set from the Claude Design export: warm neutrals, semantic status colours, and the twelve-hue categorical poste palette, in light and dark. Declared through Tailwind's @theme so utilities compile to var(--color-*) and follow the theme without per-component branching. The poste palette derives every hue from one formula with an alternating lightness step, so neighbouring hues never land at the same lightness. ShiftChip always prints the poste code alongside the fill: colour carries meaning in the grid, and a grid has to stay readable in print, in greyscale, and to someone who confuses red and green. Week counters live in src/domain/counters rather than in the component, because the same numbers will feed the hours report and the payroll export later. Durations are whole minutes: decimal hours drift by a minute in ways that are invisible on screen and wrong on a payslip. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Cr9dkEHwbDgkWPnyGj1Rjv
52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
import type { ButtonHTMLAttributes, ReactNode } from 'react';
|
|
|
|
import { cx } from '@/lib/cx';
|
|
|
|
export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
|
|
export type ButtonSize = 'sm' | 'md';
|
|
|
|
const VARIANTS: Record<ButtonVariant, string> = {
|
|
primary:
|
|
'border-accent bg-accent text-accent-ink hover:bg-accent-hover active:bg-accent-press',
|
|
secondary:
|
|
'border-line-3 bg-surface text-ink-1 hover:bg-surface-2 active:bg-surface-3',
|
|
ghost:
|
|
'border-transparent bg-transparent text-ink-2 hover:bg-surface-2 hover:text-ink-1',
|
|
danger:
|
|
'border-danger bg-danger text-danger-ink hover:bg-danger-hover active:bg-danger-hover',
|
|
};
|
|
|
|
const SIZES: Record<ButtonSize, string> = {
|
|
sm: 'h-[26px] px-2.5 text-xs',
|
|
md: 'h-8 px-3.5 text-sm',
|
|
};
|
|
|
|
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
variant?: ButtonVariant;
|
|
size?: ButtonSize;
|
|
children: ReactNode;
|
|
}
|
|
|
|
export function Button({
|
|
variant = 'secondary',
|
|
size = 'md',
|
|
className,
|
|
type = 'button',
|
|
...rest
|
|
}: ButtonProps) {
|
|
return (
|
|
<button
|
|
type={type}
|
|
className={cx(
|
|
'inline-flex shrink-0 items-center justify-center gap-1.5 rounded-2 border font-medium',
|
|
'cursor-pointer transition-colors duration-[var(--d-1)] ease-organic',
|
|
'disabled:cursor-not-allowed disabled:opacity-50',
|
|
VARIANTS[variant],
|
|
SIZES[size],
|
|
className,
|
|
)}
|
|
{...rest}
|
|
/>
|
|
);
|
|
}
|