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

Merged

PlasticDigits merged 1 commit from issue-416-design-tokens into main

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

PlasticDigits commented

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

(Migrated from gitlab.com)

Summary

Aligns design tokens across the frontend stack for #416:

Tailwind — removed legacy primary / dex blue hex palettes; theme.extend.colors now aliases CSS variables (bg-*, ink, line, mint, accent, …) per docs/design-system.md § Tailwind color aliases.
Trade bootstrap — trade-bootstrap.css defines a minimal :root / data-theme token subset mirroring theme-dark.css / theme-light.css; skeleton uses var(--bg-0), var(--line), etc. (no blue flash).
QA docs — QA_PASS_2026-03-13.md footer toggle rows marked historical; QA_TEMPLATE.md §10.1.8 adds bootstrap continuity check; new QA_PASS_2026-06-25.md records visual pass.
Verification — scripts/check_design_tokens.py, make verify-issue-416, unit + Playwright visual tests; screenshots in docs/qa/issue-416/.

Acceptance checklist

Item	Command / step	Result
Tailwind colors documented as CSS var aliases	`grep 'Tailwind color aliases' docs/design-system.md`; `python3 scripts/check_design_tokens.py`	PASS
Trade bootstrap matches dark theme tokens	`python3 scripts/check_design_tokens.py`; `npm run test -- --run src/designTokens.test.ts`	PASS
`QA_TEMPLATE.md` §10 references header theme toggle	`grep 'Header theme toggle' QA_TEMPLATE.md`	PASS
Visual QA: `/`, `/trade`, `/limits`, `/pool`, `/portfolio`, `/charts`, `/trader`, `/protocol`	`PLAYWRIGHT_SKIP_CHAIN=1 ./node_modules/.bin/playwright test e2e/design-tokens-visual.spec.ts --project=e2e-smoke`	PASS
Screenshot: `/trade` bootstrap first paint	`docs/qa/issue-416/trade-bootstrap-first-paint.png`	PASS
Screenshot: light/dark `shell-panel` on Swap	`docs/qa/issue-416/swap-shell-panel-light-dark-side-by-side.png`	PASS
`make test-frontend`	Full suite	SKIP — unrelated `cosmesPatch127.test.ts` failure on patch version drift (pre-existing on main)
`make lint-frontend`	`make lint-frontend`	PASS
No new hard-coded blues in bootstrap path	`python3 scripts/check_design_tokens.py`	PASS
QA §10 hover-sound spot-check	Documented in `QA_PASS_2026-06-25.md` §10.3	SKIP (manual per release; sounds unchanged)

Third-party verification

git fetch origin issue-416-design-tokens && git checkout issue-416-design-tokens
make verify-issue-416
PLAYWRIGHT_SKIP_CHAIN=1 bash scripts/with-node.sh --cwd frontend-dapp -- \
  ./node_modules/.bin/playwright test e2e/design-tokens-visual.spec.ts --project=e2e-smoke

Manual:

Hard refresh /trade — warm skeleton → hydrated panel (no blue flash).
Toggle theme in header (desktop) or More sheet (mobile) — bootstrap fixture + app shell stay aligned.

Screenshots: docs/qa/issue-416/

## Summary Aligns design tokens across the frontend stack for [#416](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/work_items/416): - **Tailwind** — removed legacy `primary` / `dex` blue hex palettes; `theme.extend.colors` now aliases CSS variables (`bg-*`, `ink`, `line`, `mint`, `accent`, …) per [`docs/design-system.md`](docs/design-system.md) § Tailwind color aliases. - **Trade bootstrap** — `trade-bootstrap.css` defines a minimal `:root` / `data-theme` token subset mirroring `theme-dark.css` / `theme-light.css`; skeleton uses `var(--bg-0)`, `var(--line)`, etc. (no blue flash). - **QA docs** — `QA_PASS_2026-03-13.md` footer toggle rows marked historical; `QA_TEMPLATE.md` §10.1.8 adds bootstrap continuity check; new `QA_PASS_2026-06-25.md` records visual pass. - **Verification** — `scripts/check_design_tokens.py`, `make verify-issue-416`, unit + Playwright visual tests; screenshots in `docs/qa/issue-416/`. ## Acceptance checklist | Item | Command / step | Result | |------|----------------|--------| | Tailwind colors documented as CSS var aliases | `grep 'Tailwind color aliases' docs/design-system.md`; `python3 scripts/check_design_tokens.py` | PASS | | Trade bootstrap matches dark theme tokens | `python3 scripts/check_design_tokens.py`; `npm run test -- --run src/designTokens.test.ts` | PASS | | `QA_TEMPLATE.md` §10 references header theme toggle | `grep 'Header theme toggle' QA_TEMPLATE.md` | PASS | | Visual QA: `/`, `/trade`, `/limits`, `/pool`, `/portfolio`, `/charts`, `/trader`, `/protocol` | `PLAYWRIGHT_SKIP_CHAIN=1 ./node_modules/.bin/playwright test e2e/design-tokens-visual.spec.ts --project=e2e-smoke` | PASS | | Screenshot: `/trade` bootstrap first paint | `docs/qa/issue-416/trade-bootstrap-first-paint.png` | PASS | | Screenshot: light/dark `shell-panel` on Swap | `docs/qa/issue-416/swap-shell-panel-light-dark-side-by-side.png` | PASS | | `make test-frontend` | Full suite | SKIP — unrelated `cosmesPatch127.test.ts` failure on patch version drift (pre-existing on main) | | `make lint-frontend` | `make lint-frontend` | PASS | | No new hard-coded blues in bootstrap path | `python3 scripts/check_design_tokens.py` | PASS | | QA §10 hover-sound spot-check | Documented in `QA_PASS_2026-06-25.md` §10.3 | SKIP (manual per release; sounds unchanged) | ## Third-party verification ```bash git fetch origin issue-416-design-tokens && git checkout issue-416-design-tokens make verify-issue-416 PLAYWRIGHT_SKIP_CHAIN=1 bash scripts/with-node.sh --cwd frontend-dapp -- \ ./node_modules/.bin/playwright test e2e/design-tokens-visual.spec.ts --project=e2e-smoke ``` Manual: 1. Hard refresh `/trade` — warm skeleton → hydrated panel (no blue flash). 2. Toggle theme in **header** (desktop) or More sheet (mobile) — bootstrap fixture + app shell stay aligned. Screenshots: [`docs/qa/issue-416/`](docs/qa/issue-416/)

PlasticDigits commented

2026-06-25 20:50:57 +00:00

(Migrated from gitlab.com)

Security review — MR !941

Commit reviewed: 32314a8bed0dd53937f9496d14719eedb3d2d432
Scope: Design-token alignment (#416) — Tailwind color aliases, trade-bootstrap.css token refactor, QA/docs, verification scripts (check_design_tokens.py, verify-issue-416.sh), unit/Playwright visual tests, static bootstrap fixture.

Method

Reviewed full MR diff (19 files); no CosmWasm, indexer, auth, or API surface changes.
Traced attacker-controlled inputs (localStorage theme via existing theme.js, route paths in e2e only) to sinks — no new user-data rendering, injection, or network calls introduced.
Prior MR security threads: none (first security pass on this MR).

Outcome

FINDINGS: 0 medium+

Security review: no medium+ findings on this diff.

Area	Result
XSS / HTML injection	No new `innerHTML`/unsanitized DOM sinks; bootstrap shell remains static markup (`trade-shell.js` unchanged). `theme.js` continues to allowlist `data-theme` to `dark`/`light` only.
CSS injection	`trade-bootstrap.css` uses static `:root` token definitions; no attacker-controlled values in selectors or properties.
Authn/authz / secrets	Not in scope; unchanged.
SSRF / path traversal / deserialization	Not introduced; verification scripts read fixed repo paths only.
Supply chain	No new runtime dependencies.
DeFi/on-chain	No contract or transaction-path changes.

Inline threads: none (no findings requiring line-level comments).

Automated security review (Cursor agent).

## Security review — MR !941 **Commit reviewed:** `32314a8bed0dd53937f9496d14719eedb3d2d432` **Scope:** Design-token alignment (#416) — Tailwind color aliases, `trade-bootstrap.css` token refactor, QA/docs, verification scripts (`check_design_tokens.py`, `verify-issue-416.sh`), unit/Playwright visual tests, static bootstrap fixture. ### Method - Reviewed full MR diff (19 files); no CosmWasm, indexer, auth, or API surface changes. - Traced attacker-controlled inputs (`localStorage` theme via existing `theme.js`, route paths in e2e only) to sinks — no new user-data rendering, injection, or network calls introduced. - Prior MR security threads: none (first security pass on this MR). ### Outcome **FINDINGS: 0** medium+ Security review: **no medium+ findings** on this diff. | Area | Result | |------|--------| | XSS / HTML injection | No new `innerHTML`/unsanitized DOM sinks; bootstrap shell remains static markup (`trade-shell.js` unchanged). `theme.js` continues to allowlist `data-theme` to `dark`/`light` only. | | CSS injection | `trade-bootstrap.css` uses static `:root` token definitions; no attacker-controlled values in selectors or properties. | | Authn/authz / secrets | Not in scope; unchanged. | | SSRF / path traversal / deserialization | Not introduced; verification scripts read fixed repo paths only. | | Supply chain | No new runtime dependencies. | | DeFi/on-chain | No contract or transaction-path changes. | **Inline threads:** none (no findings requiring line-level comments). --- Automated security review (Cursor agent).

PlasticDigits commented

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

(Migrated from gitlab.com)

mentioned in commit a07ae2200a

mentioned in commit a07ae2200a8896b6670cca68ccc86db0eb52e9e3