code/cl8y-dex-terraclassic

Fork 0

Align design tokens: Tailwind, trade-bootstrap, and visual QA pass #416

New issue

Closed

opened 2026-06-25 14:12:48 +00:00 by PlasticDigits · 8 comments

PlasticDigits commented

2026-06-25 14:12:48 +00:00

(Migrated from gitlab.com)

Parent

#411 — Updated Gap Analysis (recommendations 7 + 8)

Current codebase

Design implementation is cohesive in index.css, but peripheral config drifts:

Asset	Issue
`tailwind.config.js`	`primary` / `dex` blue palette vs warm CSS-var system
`public/bootstrap/trade-bootstrap.css`	Hard-coded warm palette, not `data-theme` tokens
`QA_PASS_2026-03-13.md`	Footer theme toggle (superseded by header #170)
`QA_TEMPLATE.md` §10	Neo-brutalist / hover-sound checklist — manual only

All major routes use shell-panel* wrappers; trade bootstrap skeleton loads before JS chunk on /trade.

Why needed

Token drift causes new Tailwind utilities to clash with the glass/neo theme. Off-theme bootstrap flash on /trade hurts perceived quality. QA doc drift wastes manual passes.

Constraints / guardrails

Prefer mapping Tailwind colors to CSS variables over duplicating hex values.
trade-bootstrap.css must stay tiny (critical path) — token alignment via shared custom properties if feasible.
Update QA_PASS or add note that footer toggle is historical; QA_TEMPLATE should reference header theme control (#170).
Depends on docs/design-system.md from sibling issue — link token names.

Relevant files

frontend-dapp/tailwind.config.js
frontend-dapp/public/bootstrap/trade-bootstrap.css
frontend-dapp/index.html (bootstrap link)
QA_TEMPLATE.md §10
QA_PASS_2026-03-13.md
docs/design-system.md (from #411 child — coordinate)

Recommended direction

Align tailwind.config.js extend.colors with CSS variables (var(--mint) etc.) or document deprecated Tailwind palette entries.
Refactor trade-bootstrap.css to use same :root / data-theme variables as index.css (subset).
Run visual QA pass per QA_TEMPLATE.md §10 on all primary routes; file deltas as checklist in issue MR.
Fix QA_PASS / template drift for theme toggle location.

Acceptance criteria

Tailwind theme colors documented as aliases to CSS vars or marked deprecated in design doc.
Trade bootstrap skeleton matches dark theme tokens (no blue flash).
QA_TEMPLATE.md §10 references current header theme toggle.
Visual QA checklist completed for: /, /trade, /limits, /pool, /portfolio, /charts, /trader, /protocol.
Screenshot: /trade first paint (bootstrap skeleton) — on-theme colors.
Screenshot: Side-by-side light/dark shell-panel on Swap.

Test plan

make test-frontend
make lint-frontend
Manual: hard refresh /trade — skeleton → hydrated panel color continuity.
Manual: toggle data-theme — bootstrap + app shell match.

Attack / abuse test plan

N/A. Verify CSP / no new external font loads in bootstrap.

Verification criteria

No new hard-coded #3b82f6-class blues in bootstrap path.
QA §10 hover-sound spot-check documented (pass or known gap).

## Parent [#411 — Updated Gap Analysis](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/work_items/411) (recommendations 7 + 8) ## Current codebase Design implementation is cohesive in `index.css`, but peripheral config drifts: | Asset | Issue | |-------|-------| | `tailwind.config.js` | `primary` / `dex` blue palette vs warm CSS-var system | | `public/bootstrap/trade-bootstrap.css` | Hard-coded warm palette, not `data-theme` tokens | | `QA_PASS_2026-03-13.md` | Footer theme toggle (superseded by header #170) | | `QA_TEMPLATE.md` §10 | Neo-brutalist / hover-sound checklist — manual only | All major routes use `shell-panel*` wrappers; trade bootstrap skeleton loads before JS chunk on `/trade`. ## Why needed Token drift causes new Tailwind utilities to clash with the glass/neo theme. Off-theme bootstrap flash on `/trade` hurts perceived quality. QA doc drift wastes manual passes. ## Constraints / guardrails - Prefer mapping Tailwind colors to CSS variables over duplicating hex values. - `trade-bootstrap.css` must stay tiny (critical path) — token alignment via shared custom properties if feasible. - Update `QA_PASS` or add note that footer toggle is historical; `QA_TEMPLATE` should reference header theme control (#170). - Depends on `docs/design-system.md` from sibling issue — link token names. ## Relevant files - `frontend-dapp/tailwind.config.js` - `frontend-dapp/public/bootstrap/trade-bootstrap.css` - `frontend-dapp/index.html` (bootstrap link) - `QA_TEMPLATE.md` §10 - `QA_PASS_2026-03-13.md` - `docs/design-system.md` (from #411 child — coordinate) ## Recommended direction 1. Align `tailwind.config.js` `extend.colors` with CSS variables (`var(--mint)` etc.) or document deprecated Tailwind palette entries. 2. Refactor `trade-bootstrap.css` to use same `:root` / `data-theme` variables as `index.css` (subset). 3. Run visual QA pass per `QA_TEMPLATE.md` §10 on all primary routes; file deltas as checklist in issue MR. 4. Fix `QA_PASS` / template drift for theme toggle location. ## Acceptance criteria - [ ] Tailwind theme colors documented as aliases to CSS vars or marked deprecated in design doc. - [ ] Trade bootstrap skeleton matches dark theme tokens (no blue flash). - [ ] `QA_TEMPLATE.md` §10 references current header theme toggle. - [ ] Visual QA checklist completed for: `/`, `/trade`, `/limits`, `/pool`, `/portfolio`, `/charts`, `/trader`, `/protocol`. - [ ] **Screenshot:** `/trade` first paint (bootstrap skeleton) — on-theme colors. - [ ] **Screenshot:** Side-by-side light/dark `shell-panel` on Swap. ## Test plan - `make test-frontend` - `make lint-frontend` - Manual: hard refresh `/trade` — skeleton → hydrated panel color continuity. - Manual: toggle `data-theme` — bootstrap + app shell match. ## Attack / abuse test plan - N/A. Verify CSP / no new external font loads in bootstrap. ## Verification criteria - No new hard-coded `#3b82f6`-class blues in bootstrap path. - QA §10 hover-sound spot-check documented (pass or known gap).

PlasticDigits commented

2026-06-25 14:13:22 +00:00

(Migrated from gitlab.com)

mentioned in issue #411

PlasticDigits commented

2026-06-25 20:48:54 +00:00

(Migrated from gitlab.com)

mentioned in commit 32314a8bed

mentioned in commit 32314a8bed0dd53937f9496d14719eedb3d2d432

PlasticDigits commented

2026-06-25 20:49:05 +00:00

(Migrated from gitlab.com)

mentioned in merge request !941

PlasticDigits commented

2026-06-25 21:51:50 +00:00

(Migrated from gitlab.com)

mentioned in commit a07ae2200a

mentioned in commit a07ae2200a8896b6670cca68ccc86db0eb52e9e3

PlasticDigits commented

2026-06-26 06:25:23 +00:00

(Migrated from gitlab.com)

Verification complete — GitLab #416

Verified on main at merge commit a07ae220 (MR issue-416-design-tokens).

Acceptance criteria

Criterion	Result	How verified
Tailwind theme colors documented as CSS var aliases or deprecated	PASS	`docs/design-system.md` § Tailwind color aliases; `python3 scripts/check_design_tokens.py`; `src/designTokens.test.ts`
Trade bootstrap skeleton matches dark theme tokens (no blue flash)	PASS	`trade-bootstrap.css` uses `var(--bg-0)` / warm palette; no `#3b82f6`-class blues; Playwright bootstrap first-paint asserts `rgb(14, 9, 8)`
`QA_TEMPLATE.md` §10 references header theme toggle	PASS	§9.2.6, §10.1.5 (header / More sheet); §10.1.8 trade bootstrap continuity
Visual QA on 8 primary routes	PASS	Playwright `e2e/design-tokens-visual.spec.ts` — `/`, `/trade`, `/limits`, `/pool`, `/portfolio`, `/charts`, `/trader`, `/protocol`
Screenshot: `/trade` bootstrap first paint	PASS	`docs/qa/issue-416/trade-bootstrap-first-paint.png` (regenerated in verify run; matches committed artifact)
Screenshot: light/dark `shell-panel` on Swap	PASS	`docs/qa/issue-416/swap-shell-panel-light-dark-side-by-side.png`
`QA_PASS` footer toggle historical note	PASS	`QA_PASS_2026-03-13.md` historical banner; `QA_PASS_2026-06-25.md` acceptance checklist

Test plan

Step	Result	Command / evidence
Frontend unit tests	PASS	`make test-frontend` — 184 files, 1084 tests
Frontend lint	PASS	`make lint-frontend` — 0 errors (5 pre-existing warnings)
Design token invariant	PASS	`make verify-issue-416` — 9/9 steps
Visual QA automation	PASS	`PLAYWRIGHT_SKIP_CHAIN=1 … playwright test e2e/design-tokens-visual.spec.ts --project=e2e-smoke` — 10/10
Manual: `/trade` skeleton → hydrated continuity	PASS	Playwright route smoke + §10.1.8 row; bootstrap fixture uses same tokens as `theme-dark.css` / `theme-light.css`
Manual: `data-theme` toggle	PASS	Playwright swap light/dark shell-panel capture; `e2e/navigation.spec.ts` header theme toggle (#170)
CSP / no external fonts in bootstrap	PASS	`index.html` CSP `font-src 'self'`; `trade-bootstrap.css` uses `system-ui` only
QA §10 hover-sound spot-check	SKIP	Documented in `QA_PASS_2026-06-25.md` §10.3 — unchanged audio; manual per release

Verification criteria

No legacy blue hex in bootstrap path: PASS (check_design_tokens.py, designTokens.test.ts)
QA §10 hover-sound: SKIP (known gap, documented)

No repo changes required; closing issue.

## Verification complete — GitLab #416 Verified on `main` at merge commit `a07ae220` (MR `issue-416-design-tokens`). ### Acceptance criteria | Criterion | Result | How verified | |-----------|--------|--------------| | Tailwind theme colors documented as CSS var aliases or deprecated | **PASS** | `docs/design-system.md` § Tailwind color aliases; `python3 scripts/check_design_tokens.py`; `src/designTokens.test.ts` | | Trade bootstrap skeleton matches dark theme tokens (no blue flash) | **PASS** | `trade-bootstrap.css` uses `var(--bg-0)` / warm palette; no `#3b82f6`-class blues; Playwright bootstrap first-paint asserts `rgb(14, 9, 8)` | | `QA_TEMPLATE.md` §10 references header theme toggle | **PASS** | §9.2.6, §10.1.5 (header / More sheet); §10.1.8 trade bootstrap continuity | | Visual QA on 8 primary routes | **PASS** | Playwright `e2e/design-tokens-visual.spec.ts` — `/`, `/trade`, `/limits`, `/pool`, `/portfolio`, `/charts`, `/trader`, `/protocol` | | Screenshot: `/trade` bootstrap first paint | **PASS** | `docs/qa/issue-416/trade-bootstrap-first-paint.png` (regenerated in verify run; matches committed artifact) | | Screenshot: light/dark `shell-panel` on Swap | **PASS** | `docs/qa/issue-416/swap-shell-panel-light-dark-side-by-side.png` | | `QA_PASS` footer toggle historical note | **PASS** | `QA_PASS_2026-03-13.md` historical banner; `QA_PASS_2026-06-25.md` acceptance checklist | ### Test plan | Step | Result | Command / evidence | |------|--------|-------------------| | Frontend unit tests | **PASS** | `make test-frontend` — 184 files, 1084 tests | | Frontend lint | **PASS** | `make lint-frontend` — 0 errors (5 pre-existing warnings) | | Design token invariant | **PASS** | `make verify-issue-416` — 9/9 steps | | Visual QA automation | **PASS** | `PLAYWRIGHT_SKIP_CHAIN=1 … playwright test e2e/design-tokens-visual.spec.ts --project=e2e-smoke` — 10/10 | | Manual: `/trade` skeleton → hydrated continuity | **PASS** | Playwright route smoke + §10.1.8 row; bootstrap fixture uses same tokens as `theme-dark.css` / `theme-light.css` | | Manual: `data-theme` toggle | **PASS** | Playwright swap light/dark shell-panel capture; `e2e/navigation.spec.ts` header theme toggle (#170) | | CSP / no external fonts in bootstrap | **PASS** | `index.html` CSP `font-src 'self'`; `trade-bootstrap.css` uses `system-ui` only | | QA §10 hover-sound spot-check | **SKIP** | Documented in `QA_PASS_2026-06-25.md` §10.3 — unchanged audio; manual per release | ### Verification criteria - No legacy blue hex in bootstrap path: **PASS** (`check_design_tokens.py`, `designTokens.test.ts`) - QA §10 hover-sound: **SKIP** (known gap, documented) No repo changes required; closing issue.

PlasticDigits (Migrated from gitlab.com) closed this issue

2026-06-26 06:25:24 +00:00

Brouie commented

2026-06-28 23:24:44 +00:00

(Migrated from gitlab.com)

mentioned in issue #337