store: reconcile globals.css with the approved design tokens #45
Loading…
Add table
Add a link
Reference in a new issue
No description provided.
Delete branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Unblocked — #40 is answered. Palette: adopt the design green. Typography: adopt both families. Details below; the reasoning is in #40's decision comment.
Palette (from #40.2)
--accent:#b4471f→#2d543c. Re-derive--accent-hoverand--accent-softfrom the new hue rather than carrying the rust tints across.--okkeeps#2d543c— it already equals the incoming accent, and the design separates availability by chip tint, not hue. Add--warn: #8a5a12and--off: #8c3a32for the tri-state chips #47 needs..stock-badge.is-outmust move from--accentto--off. It currently borrows the accent, so a green accent would render "Habis" in the available colour. This is the one repaint that is a correctness bug, not a taste call.--focus: #1b4d8fstill reads as deliberately-not-the-accent against green, and that.category-tile:hover(--accent-soft) has not become indistinguishable from the ready chip.Typography (from #40.3)
Archivo for display (
h1–h4,.price,.brand-name, buttons), IBM Plex Sans for body, replacing Inter inapp/layout.tsx. Load vianext/fontand self-host — do not copy the mockups'<link rel="stylesheet">tofonts.googleapis.com; this is a static export and that is a render-blocking third-party request on every page. Subset to latin. Keepfont-variant-numeric: tabular-numson prices, and re-verify the retail scale still holds (h1 capped ~2.5rem, line-height 1.15) since Archivo's metrics differ from Inter's.#33 already built a token system in
apps/store/app/globals.css(781 lines,--s1..--s16, radii,--container,--section-y). The approvedassets/tokens.cssdiffers in measurable ways that are not decisions and can land regardless:--container1180px1280px.product-gridminmax(170px, 1fr)minmax(200px, 1fr).cards/.list-cardsminmax(260px/280px, 1fr)--r-sm/md/lg8/12/16--r1/r2/r38/12/16 (same values, different names)--section-y--section-gap: 44px,36pxunder 1120pxNote the grid figure: the design's
minmax(200px, 1fr)is less dense than what shipped at170px. #33's comment defends the tighter cell deliberately. Widening to 200px is a real regression in items-per-row on desktop — either accept the design's looser cell as reviewed, or keep 170px and record the deviation here. Do not change it silently.Also in scope, and independent of #40: the mockups'
.rail-card .btn--ghostneeded a contrast fix (dark green on the dark service band measured ~1.3:1). Check the shipped.service-bandfor the same defect before copying anything from the mockup's rail.Acceptance
--container, the grid cells, and the section rhythm match whatever this issue records as the decision; every existing class keeps working with no.tsxchanges, same as #33. The accent and font changes are a separate commit gated on #40, so this issue can close without them if #40 rules them out.