From dbc2d166d85ed3f0f0210b0e1578ec247a7969ca Mon Sep 17 00:00:00 2001 From: Gary Moran Date: Wed, 2 Sep 2026 15:18:57 +0000 Subject: [PATCH 1/2] Fix surface colours in the cost comparison table and estimator `--color-card-background-hover` reads like the token set's subtle-surface value, but it is not one: `.gray-section` overrides it to plain white, so on a gray section a header row painted with it comes out lighter than the rows below, and the table stops reading as a card at all. The estimator had the mirror problem: its receipt panel used `card-background`, the same white as the container it sits inside, separated by nothing but a hairline. Add `--color-surface-muted` and `--color-surface-accent`, resolved per section variant so each sits one step off the card surface it lands on, then use them: - the table is a card (`card-background`) with a muted header tint - the Filecoin row takes the brand tint, so it does not merge into the header tint directly above it - mobile cards match: card surface, brand tint on the highlighted one - the estimator column is a card, its receipt panel the inset tint Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_017YJ9WRU8X7pPznzQ7k3Q52 --- .../components/ComparisonTable.tsx | 27 ++++++++++++------- .../components/CostEstimator.tsx | 5 +++- src/app/ipfs2filecoin/page.tsx | 2 +- src/styles/globals.css | 22 +++++++++++++++ 4 files changed, 44 insertions(+), 12 deletions(-) diff --git a/src/app/ipfs2filecoin/components/ComparisonTable.tsx b/src/app/ipfs2filecoin/components/ComparisonTable.tsx index 57d82f5b..042f28f2 100644 --- a/src/app/ipfs2filecoin/components/ComparisonTable.tsx +++ b/src/app/ipfs2filecoin/components/ComparisonTable.tsx @@ -27,7 +27,9 @@ function MobileComparisonCards() { key={`${service} ${detail}`} className={clsx( 'rounded-xl border border-(--color-border-muted) p-4', - highlighted && 'bg-(--color-card-background-hover)', + highlighted + ? 'bg-(--color-surface-accent)' + : 'bg-(--color-card-background)', )} >
+
{/* - `card-background-hover` is the only subtle-surface value the token - set has: zinc-50 on light sections, a lift rather than a wash on - dark ones. Named for hover, used here as a static header tint. + `surface-muted` is the local subtle-surface token, one step off the + card the table sits on in every section variant. Not + `card-background-hover`, which collapses to white inside a `gray` + section and painted the header lighter than the rows below it. */} - + @@ -82,14 +85,18 @@ function DesktopComparisonTable() { {pricingComparison.map( ({ service, detail, storagePerTbMonth, egress, highlighted }) => ( - // Weight and colour sit on the row so the highlighted line reads - // as one emphasised entry rather than two bold cells and a third - // that quietly drops back to the body colour. + // Weight, colour and fill sit on the row so the highlighted line + // reads as one emphasised entry rather than two bold cells and a + // third that quietly drops back to the body colour. The fill is + // the brand tint rather than `surface-muted`: sharing the header's + // tint would merge the two, since the highlighted row is the first + // one under it. {/* diff --git a/src/app/ipfs2filecoin/components/CostEstimator.tsx b/src/app/ipfs2filecoin/components/CostEstimator.tsx index 31ae58e6..d0a3f5de 100644 --- a/src/app/ipfs2filecoin/components/CostEstimator.tsx +++ b/src/app/ipfs2filecoin/components/CostEstimator.tsx @@ -243,7 +243,10 @@ function EstimateBreakdown({ estimate }: { estimate: CostEstimate }) {
{rows.map(({ label, amount, note }) => ( diff --git a/src/app/ipfs2filecoin/page.tsx b/src/app/ipfs2filecoin/page.tsx index 39bfe07d..449be52c 100644 --- a/src/app/ipfs2filecoin/page.tsx +++ b/src/app/ipfs2filecoin/page.tsx @@ -183,7 +183,7 @@ export default function IpfsToFilecoin() {
Estimate your deposit diff --git a/src/styles/globals.css b/src/styles/globals.css index 318a2d5d..f3525023 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -12,3 +12,25 @@ --animate-slide-down: slideDown 300ms ease-out; --animate-slide-up: slideUp 300ms ease-out; } + +/* + Two surface tints the ui-filecoin token set has no value for. + `--color-card-background-hover` looks like the subtle-surface token but is not + one: inside a `gray` section it collapses to white, so using it as a header + tint or a highlight painted the emphasised part lighter than the card around + it. These resolve one step off the card surface in every section variant. +*/ +:root, +.light-section { + --color-surface-muted: var(--color-zinc-50); + --color-surface-accent: var(--color-brand-50); +} + +.gray-section { + --color-surface-muted: var(--color-zinc-100); +} + +.dark-section { + --color-surface-muted: var(--color-zinc-800); + --color-surface-accent: var(--color-brand-950); +} From 690854eaa9b4d38570301e86b4679e50705c7e60 Mon Sep 17 00:00:00 2001 From: Phi Date: Mon, 28 Sep 2026 08:44:03 +0200 Subject: [PATCH 2/2] fix: preserve contrast for estimator receipt notes --- src/app/ipfs2filecoin/components/CostEstimator.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/ipfs2filecoin/components/CostEstimator.tsx b/src/app/ipfs2filecoin/components/CostEstimator.tsx index d0a3f5de..81303c44 100644 --- a/src/app/ipfs2filecoin/components/CostEstimator.tsx +++ b/src/app/ipfs2filecoin/components/CostEstimator.tsx @@ -256,7 +256,8 @@ function EstimateBreakdown({ estimate }: { estimate: CostEstimate }) { >
{label} - + {/* Keep the small notes above 4.5:1 contrast on the muted surface. */} + {note}
Where the data lives