Skip to content

fix(ui): unify download button style with project baseline#4

Merged
FuDesign2008 merged 1 commit into
mainfrom
feat/unify-button-style
Apr 22, 2026
Merged

fix(ui): unify download button style with project baseline#4
FuDesign2008 merged 1 commit into
mainfrom
feat/unify-button-style

Conversation

@FuDesign2008

Copy link
Copy Markdown
Owner

Summary

The `Download as Markdown` / `Download as ZIP` buttons introduced in #1 used a Material-style filled look (saturated blue/green + white text) that clashed with the project's Neo-Brutalism language (thick black border, light background, black text, offset black shadow, yellow `:active`). The white `color` also turned `box-shadow: 0.1em 0.1em currentColor` into an invisible white shadow on the white page.

Change

Make the two download buttons inherit the baseline `button{}` rules and only override `background` for light-tinted semantic hints:

Button Before After
`--md` `#0a84ff` bg + `#fff` text + custom `:active` `#cfe8ff` bg, everything else inherits `button{}`
`--zip` `#00c853` bg + `#fff` text + custom `:active` `#c8f7da` bg, everything else inherits `button{}`

`border-color`, `color`, `box-shadow`, and the `:active` yellow now come from the baseline, so the three buttons (`← Go back` + two downloads) share the same visual grammar.

Accessibility

Black text contrast against the new backgrounds (via WCAG relative-luminance formula):

  • `#000` on `#cfe8ff` ≈ 17.0:1 (was ≈3.5:1 white-on-blue)
  • `#000` on `#c8f7da` ≈ 18.4:1 (was ≈3.1:1 white-on-green)

Both far exceed the WCAG AA 4.5:1 threshold for normal text.

Scope

  • Only `style.css` is touched (+4 / -18 lines).
  • `src/**`, `index.html`, `package.json` are untouched.
  • `index.js` is byte-identical to `main` (CSS changes don't affect the JS bundle).

Verification

  • `npm run typecheck` ✓
  • `npm run lint` ✓ (0 error / 0 warning)
  • `npm run test:run` ✓ (13 passed)
  • `npm run build` ✓ (produces the same `index.js` as `main`; CI's `git diff --quiet -- index.js` will pass)
  • Local dev server (`npm run start`): three buttons now share border, black offset shadow, and yellow `:active` feedback; download buttons carry a subtle blue/green tint.

Test plan

Made with Cursor

The `Download as Markdown` / `Download as ZIP` buttons introduced in #1
used a Material-style filled look (saturated blue/green + white text)
that clashed with the project's Neo-Brutalism language (thick black
border, light background, black text, offset black shadow, yellow
`:active`). The white `color` also made `box-shadow: 0.1em 0.1em
currentColor` render as an invisible white shadow on the white page.

Make the two download buttons inherit the baseline `button{}` rules and
only override `background` for light-tinted semantic hints:

- `--md`  → `#cfe8ff` (light blue, black text, contrast ≈17:1)
- `--zip` → `#c8f7da` (light green, black text, contrast ≈18:1)

Border color, text color, offset shadow, and `:active` yellow now come
from the baseline, so the three buttons (`Go back` + two downloads)
share the same visual grammar. Net -14 lines of CSS; no JS or markup
changes; `index.js` is byte-identical to main.

Made-with: Cursor
@FuDesign2008 FuDesign2008 merged commit e244e2c into main Apr 22, 2026
1 check passed
@FuDesign2008 FuDesign2008 deleted the feat/unify-button-style branch April 22, 2026 12:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant