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
44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
import type { ReactNode } from 'react';
|
|
|
|
import { cx } from '@/lib/cx';
|
|
|
|
export type Tone = 'neutral' | 'accent' | 'ok' | 'warn' | 'danger' | 'info';
|
|
|
|
const TONES: Record<Tone, string> = {
|
|
neutral: 'bg-surface-3 text-ink-2 border-line-2',
|
|
accent: 'bg-accent-soft text-accent-soft-ink border-accent',
|
|
ok: 'bg-ok-soft text-ok-soft-ink border-ok',
|
|
warn: 'bg-warn-soft text-warn-soft-ink border-warn',
|
|
danger: 'bg-danger-soft text-danger-soft-ink border-danger',
|
|
info: 'bg-info-soft text-info-soft-ink border-info',
|
|
};
|
|
|
|
export interface BadgeProps {
|
|
tone?: Tone;
|
|
/** Sans liseré : pour les compteurs discrets de la navigation. */
|
|
subtle?: boolean;
|
|
children: ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
/** Pastille compacte. Porte un état ou un décompte, jamais une action. */
|
|
export function Badge({
|
|
tone = 'neutral',
|
|
subtle = false,
|
|
children,
|
|
className,
|
|
}: BadgeProps) {
|
|
return (
|
|
<span
|
|
className={cx(
|
|
'inline-flex shrink-0 items-center rounded-full px-2 py-px text-micro font-semibold',
|
|
subtle ? 'border-transparent' : 'border',
|
|
TONES[tone],
|
|
className,
|
|
)}
|
|
>
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|