Match the shipped styling to the Claude Design drafts
An audit of all twelve draft files against the build turned up a set of mismatches, most of them in the tier-2 token layer rather than in any one component. Tier 1 is untouched throughout - only the meanings moved. SHAPE. The drafts draw three corners, not five: 2px for a tag, thumbnail, flag or checkbox, 4px for anything with a box, and fully round for a filter chip or status pill. Nothing in any draft is 8px or 12px. --radius-card and --radius-surface therefore come down to radius/sm, a --radius-chip is added for the 2px tier, and --radius-control-lg - a quirk of the Figma Button frame's ghost cells - is retired along with its four consumers. ELEVATION. A shadow is a fraction of the ground it falls on, and the ramp was tuned for a white page: on the drafts' near-black ground a 12-28% black is invisible. Tier 1 gains the two deep steps the drafts actually draw (--shadow-dark-lg/xl), and --elevation-card/-popover/-modal move into the per-surface blocks so the dark surface can take them while the light one keeps the soft ramp. A resting card now has no shadow at all - the drafts separate with a hairline - and the black is spent on what floats. CARDS. The hover was a white-24% hairline and a faint glow; the drafts turn the hairline accent green, lift the card 6px and land a deep black under it. The lift is pointer-only and is dropped under prefers-reduced-motion. GHOST IS A TEXT LINK. The drafts never fill a ghost control - every "All updates ->" is plain text that turns green while the label-to-arrow gap opens. The tokens carry no fill in any state and the variant opts out of the 3px lift, which also retires the WCAG workaround the old Figma hover forced (green label on a green fill, 1.40:1). NAVIGATION. A nav label rests in text/secondary and brightens to primary; the current section stays primary and is marked by the accent rule, not by green text. HERO STRIPE. The middle block was painted near-black against a comment claiming the redesign had dropped white; the drafts paint it #F8F9FA. Back to background/inverse, and to the drafts' 390 : 495 : 363 split. styles/README.md is updated to match, including a contrast table that still described --surface-raised as the retired #2e2e2c. Not changed, because each is a decision rather than a defect: the drafts set every eyebrow, tag and meta line in IBM Plex Mono at 10-11px with 1.2-1.4px tracking (a third typeface, and no Arabic counterpart); draft headings are weight 800, which needs a font file we do not have; and the EU badge statement stays at --text-primary, since the visibility lockup is contractual. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
@@ -409,7 +409,7 @@ export function ConsentCheckbox({
|
||||
required
|
||||
aria-invalid={error ? true : undefined}
|
||||
aria-describedby={describedBy}
|
||||
className="mt-2xs size-md shrink-0 rounded-[var(--radius-control)] border border-border-strong accent-[var(--interactive-primary-bg)]"
|
||||
className="mt-2xs size-md shrink-0 rounded-chip border border-border-strong accent-[var(--interactive-primary-bg)]"
|
||||
/>
|
||||
<label htmlFor={name} className="body-sm text-text-primary">
|
||||
{label}
|
||||
|
||||
@@ -563,27 +563,24 @@ export function PageHero({
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* The colour band (478:16360): three blocks flush under the
|
||||
picture, 6px tall. Figma lays out 390 / 495 / 363 inside a
|
||||
1244-wide clipping frame, so the last block loses 4px and the
|
||||
split that is actually drawn is 390 : 495 : 359 - carried here
|
||||
as flex-grow ratios so it holds at every width instead of only
|
||||
at 1244. The three fills are `background/accent`,
|
||||
`background/inverse` and `background/danger`, which is why the
|
||||
middle block reads white on the dark hero and near-black on a
|
||||
light surface.
|
||||
{/* The colour band (478:16360, redrawn in the drafts' home
|
||||
hero): three blocks flush under the picture, 6px tall, split
|
||||
390 : 495 : 363 and carried as flex-grow ratios so the split
|
||||
holds at every width instead of only at the drafts' 1244.
|
||||
|
||||
The fills are `background/accent`, `background/inverse` and
|
||||
`background/danger` - the drafts paint the middle block
|
||||
#F8F9FA, so the stripe reads green / white / red on the dark
|
||||
hero and flips to green / near-black / red on a light
|
||||
surface.
|
||||
|
||||
Purely decorative, so it is hidden from assistive technology;
|
||||
as an ordinary flex row it mirrors in Arabic along with the
|
||||
rest of the page. */}
|
||||
<div aria-hidden="true" className="sh-bar-grow flex h-[6px] w-full">
|
||||
<span className="basis-0 grow-[390] bg-[var(--surface-accent)]" />
|
||||
{/* The middle block is the raised dark, not the inverse:
|
||||
the redesign drops pure white from the page entirely, so
|
||||
the stripe reads green / dark / red on the near-black
|
||||
band instead of green / white / red. */}
|
||||
<span className="basis-0 grow-[495] bg-[var(--surface-raised)]" />
|
||||
<span className="basis-0 grow-[359] bg-[var(--surface-danger)]" />
|
||||
<span className="basis-0 grow-[495] bg-[var(--surface-inverse)]" />
|
||||
<span className="basis-0 grow-[363] bg-[var(--surface-danger)]" />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
|
||||
@@ -792,7 +792,7 @@ export function FacetGroup({
|
||||
aria-hidden="true"
|
||||
className={cx(
|
||||
"mt-2xs flex size-[0.875rem] shrink-0 items-center justify-center",
|
||||
"rounded-[var(--radius-control)] border",
|
||||
"rounded-chip border",
|
||||
option.isCurrent
|
||||
? "border-border-accent"
|
||||
: "border-border-default",
|
||||
|
||||
@@ -466,7 +466,7 @@ function StreamDisclosure({
|
||||
|
||||
<h3 className="flex-1 heading-h3">{copy.title}</h3>
|
||||
|
||||
<span className="hidden shrink-0 rounded-[var(--radius-control)] bg-surface-accent-subtle px-xs py-2xs label-md uppercase text-text-accent sm:inline-block">
|
||||
<span className="hidden shrink-0 rounded-chip bg-surface-accent-subtle px-xs py-2xs label-md uppercase text-text-accent sm:inline-block">
|
||||
{copy.partners}
|
||||
</span>
|
||||
|
||||
|
||||
@@ -638,7 +638,7 @@ function MonthCell({ day, locale }: { day: CalendarDay; locale: Locale }) {
|
||||
to={entry.href}
|
||||
prefetch="intent"
|
||||
className={[
|
||||
"rounded-[var(--radius-control)] border-s-2 border-s-[var(--border-accent)]",
|
||||
"rounded-chip border-s-2 border-s-[var(--border-accent)]",
|
||||
"bg-surface-accent-subtle px-2xs py-2xs body-sm-bold text-text-primary",
|
||||
"transition-colors duration-[var(--motion-duration-fast)]",
|
||||
"ease-[var(--motion-ease-standard)] hover:text-text-accent",
|
||||
|
||||
@@ -664,7 +664,7 @@ export default function Home({ loaderData }: Route.ComponentProps) {
|
||||
key={member.name}
|
||||
className="sh-lift sh-reveal sh-reveal--in flex h-full flex-col items-start gap-sm rounded-card border border-[var(--border-subtle)] bg-[var(--surface-card)] p-xl hover:border-[var(--border-accent)]"
|
||||
>
|
||||
<span className="rounded-control bg-[var(--surface-accent-subtle)] px-xs py-2xs label-md uppercase text-[var(--text-accent)]">
|
||||
<span className="rounded-chip bg-[var(--surface-accent-subtle)] px-xs py-2xs label-md uppercase text-[var(--text-accent)]">
|
||||
{member.role}
|
||||
</span>
|
||||
<h3 className="heading-h3 text-[var(--text-primary)]">{member.name}</h3>
|
||||
|
||||
@@ -327,7 +327,7 @@ function NewsMetaRow({ entry }: { entry: NewsListItem }) {
|
||||
return (
|
||||
<div className="flex flex-wrap items-center gap-sm">
|
||||
{entry.tag ? (
|
||||
<span className="rounded-[var(--radius-control)] bg-surface-accent-subtle px-xs py-2xs label-md uppercase text-text-accent">
|
||||
<span className="rounded-chip bg-surface-accent-subtle px-xs py-2xs label-md uppercase text-text-accent">
|
||||
{entry.tag}
|
||||
</span>
|
||||
) : null}
|
||||
|
||||
@@ -515,7 +515,7 @@ function ResourceRow({
|
||||
{entry.fileKind ? (
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="flex h-14 w-11 shrink-0 items-center justify-center rounded-[var(--radius-control)] border border-border-default bg-surface-sunken label-md text-text-accent"
|
||||
className="flex h-14 w-11 shrink-0 items-center justify-center rounded-chip border border-border-default bg-surface-sunken label-md text-text-accent"
|
||||
>
|
||||
{entry.fileKind}
|
||||
</span>
|
||||
|
||||
Reference in New Issue
Block a user