MichaelandClaude Opus 5
9356c6e3f4
L'ancien thème était crème et vert forêt, corps à 14 px, libellés secondaires à 11 px. Deux défauts s'y cumulaient : ça se lisait mal huit heures par jour, et le fond chaud décalait la perception des aplats — un jaune de poste virait au vert, un rouge d'alerte s'éteignait. Le nouveau part de ce que l'écran est vraiment : un registre qu'on lit en chiffres. Papier légèrement bleuté, encre bleu-ardoise plus dense, et un seul bleu d'acte réservé à trois emplois — le filet actif, les liens, le bouton qui engage. Tout le reste est en gris et en état, ce qui rend les alertes visibles parce qu'elles sont les seules choses colorées de la page. Lisibilité d'abord. Le corps monte à 15 px, rien ne descend sous 12, et `ink-3` passe de 0,545 à 0,50 de clarté : à l'ancienne valeur, les libellés secondaires tombaient sous 4,5:1 sur ce papier. Typographie : IBM Plex Sans, et Plex Mono pour les codes. Le choix vient du contenu — cet écran affiche des identifiants, AB-300, HS-HS25, un matricule, un département 2A. Plex a été dessiné pour la documentation technique : le 1 porte un empattement, le l est courbé, le 0 se distingue du O, et ces trois détails décident si un gestionnaire recopie le bon code. Le zéro barré est activé partout. Les fichiers sont téléchargés à la compilation et servis par l'application : `font-src 'self'` tient, et aucune requête ne part vers un tiers. La structure est portée par un **filet de marge** de 2 px plutôt que par des bordures et des aplats gris — la marge du cahier, appliquée à une interface. Il marque l'onglet ouvert, l'en-tête de carte, la section active. Il ne décore jamais : un filet dit une appartenance. Le dimanche a le sien, doublé, et une colonne teintée. C'est la seule colonne du planning qui porte une conséquence de droit — L3132-27 impose une rémunération au moins double **et** un repos compensateur équivalent. La grille le montre avant que la paie ne le découvre. Le marquage ne remplace aucune alerte : le moteur de règles reste seul juge. La barre d'application devient collante, et les boutons passent de 26 à 32 px de haut : sur une grille de quatre-vingts lignes, remonter changer de semaine est le geste le plus répété, et 26 px était sous le seuil confortable au pointeur. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
31 lines
949 B
TypeScript
31 lines
949 B
TypeScript
import type { ReactNode } from 'react';
|
|
|
|
export interface PageHeaderProps {
|
|
title: string;
|
|
subtitle?: string;
|
|
actions?: ReactNode;
|
|
}
|
|
|
|
export function PageHeader({ title, subtitle, actions }: PageHeaderProps) {
|
|
return (
|
|
<div className="flex flex-wrap items-end gap-4 border-b border-line-1 pb-4">
|
|
<div className="min-w-0">
|
|
<h1 className="text-2xl font-semibold">{title}</h1>
|
|
{subtitle ? (
|
|
<p className="mt-1.5 text-sm text-ink-2">{subtitle}</p>
|
|
) : null}
|
|
</div>
|
|
<span className="flex-1" />
|
|
{actions ? <div className="flex items-center gap-2">{actions}</div> : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function PageBody({ children }: { children: ReactNode }) {
|
|
// `gap-6` plutôt que `gap-5` : sur un écran de cartes empilées, l'ancien
|
|
// écart laissait deux cartes se lire comme une seule.
|
|
return (
|
|
<div className="flex flex-col gap-6 px-6 pt-6 pb-20">{children}</div>
|
|
);
|
|
}
|