Skip to content

Fix surface colours in the cost comparison table and estimator - #363

Open
gmoranxyz wants to merge 1 commit into
FilOzone:mainfrom
gmoranxyz:fix/comparison-table-surface-colours
Open

Fix surface colours in the cost comparison table and estimator#363
gmoranxyz wants to merge 1 commit into
FilOzone:mainfrom
gmoranxyz:fix/comparison-table-surface-colours

Conversation

@gmoranxyz

Copy link
Copy Markdown
Contributor

--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

`--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 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017YJ9WRU8X7pPznzQ7k3Q52
@vercel

vercel Bot commented Sep 2, 2026

Copy link
Copy Markdown

@claude is attempting to deploy a commit to the FilOz Team on Vercel.

A member of the Team first needs to authorize it.

@FilOzzy FilOzzy added this to FOC Sep 2, 2026
@github-project-automation github-project-automation Bot moved this to 📌 Triage in FOC Sep 2, 2026
@github-project-automation github-project-automation Bot moved this from 📌 Triage to ✔️ Approved by reviewer in FOC Sep 2, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: ✔️ Approved by reviewer

Development

Successfully merging this pull request may close these issues.

3 participants