code/cl8y-dex-terraclassic

Fork 0

Document Cyberminimalist Glass System and fix btn-neo styling #415

New issue

Closed

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

PlasticDigits commented

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

(Migrated from gitlab.com)

Parent

#411 — Updated Gap Analysis (recommendations 5 + 6)

Current codebase

Full-text repo search: zero hits for "Cyberminimalist Glass System" — the name from #411 does not exist in-repo.
Implementation lives in frontend-dapp/src/index.css (~1800 lines): glassmorphism (backdrop-filter), neo-brutalist borders (shell-panel, card-neo, btn-primary, tab-neo, input-neo), warm palette via CSS variables, dual theme via data-theme.
Broken: btn-neo used in LimitOrdersPage.tsx, PairNotFoundLinkNotice.tsx, InvalidPairLinkNotice.tsx — no .btn-neo rule in index.css.
Unused: .glass defined in index.css with no src/ references.
QA_TEMPLATE.md §10 references neo-brutalist borders; docs/frontend.md documents engineering invariants but no design spec.

Why needed

#411 requires docs aligned with the Cyberminimalist Glass System. Without an authoritative spec, new UI drifts (Tailwind primary blue vs warm tokens, missing btn-neo). Broken button class is a visible defect on /limits mode toggle.

Constraints / guardrails

Adopt "Cyberminimalist Glass System" as the product name in new docs (per parent issue terminology).
New primitives should compose existing tokens (--ink, --line, --mint legacy names) — avoid a parallel Tailwind-only system.
btn-neo fix: either define as muted secondary (inset border, no fill) or replace usages with btn-muted — pick one approach repo-wide.
Do not rename CSS variables in this issue unless required for the btn-neo fix (scope creep).

Relevant files

frontend-dapp/src/index.css
frontend-dapp/src/theme-dark.css, theme-light.css
frontend-dapp/src/pages/LimitOrdersPage.tsx
frontend-dapp/src/components/trade/PairNotFoundLinkNotice.tsx
frontend-dapp/src/components/trade/InvalidPairLinkNotice.tsx
frontend-dapp/src/components/ui/Card.tsx
QA_TEMPLATE.md §10
docs/frontend.md

Recommended direction

Add docs/design-system.md — token table, primitives (shell-panel, shell-panel-strong, card-neo, btn-*, tab-neo, input-neo, label-neo), typography, spacing, when-to-use rules, icon/unicode guidelines (#411).
Define .btn-neo in index.css (secondary neo outline) or replace all btn-neo with btn-muted.
Document status of .glass (deprecate or wire to a component).
Cross-link from docs/frontend.md and QA_TEMPLATE.md §10.

Acceptance criteria

docs/design-system.md exists and names Cyberminimalist Glass System.
Component matrix covers all *-neo / shell-panel* primitives.
btn-neo renders correctly on /limits single/ladder toggle.
Pair-not-found / invalid-pair notices use styled secondary button.
Screenshot: /limits place mode toggle — both states styled.
Screenshot: Swap page showing shell-panel + card-neo compliance reference.

Test plan

Visual manual pass on /limits, /trade (pair-not-found deep link).
make lint-frontend
Optional: add Vitest snapshot or class assertion on LimitOrdersPage mode buttons.

Attack / abuse test plan

N/A (styling/docs). Confirm focus rings (--focus-ring) unchanged for a11y.

Verification criteria

rg 'btn-neo' frontend-dapp/src — every usage has matching CSS or uses btn-muted.
Design doc linked from docs/README.md or docs/frontend.md.

## Parent [#411 — Updated Gap Analysis](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/work_items/411) (recommendations 5 + 6) ## Current codebase - Full-text repo search: **zero** hits for "Cyberminimalist Glass System" — the name from #411 does not exist in-repo. - Implementation lives in `frontend-dapp/src/index.css` (~1800 lines): glassmorphism (`backdrop-filter`), neo-brutalist borders (`shell-panel`, `card-neo`, `btn-primary`, `tab-neo`, `input-neo`), warm palette via CSS variables, dual theme via `data-theme`. - **Broken:** `btn-neo` used in `LimitOrdersPage.tsx`, `PairNotFoundLinkNotice.tsx`, `InvalidPairLinkNotice.tsx` — **no `.btn-neo` rule** in `index.css`. - **Unused:** `.glass` defined in `index.css` with no `src/` references. - `QA_TEMPLATE.md` §10 references neo-brutalist borders; `docs/frontend.md` documents engineering invariants but no design spec. ## Why needed #411 requires docs aligned with the Cyberminimalist Glass System. Without an authoritative spec, new UI drifts (Tailwind `primary` blue vs warm tokens, missing `btn-neo`). Broken button class is a visible defect on `/limits` mode toggle. ## Constraints / guardrails - Adopt **"Cyberminimalist Glass System"** as the product name in new docs (per parent issue terminology). - New primitives should compose existing tokens (`--ink`, `--line`, `--mint` legacy names) — avoid a parallel Tailwind-only system. - `btn-neo` fix: either define as muted secondary (inset border, no fill) **or** replace usages with `btn-muted` — pick one approach repo-wide. - Do not rename CSS variables in this issue unless required for the `btn-neo` fix (scope creep). ## Relevant files - `frontend-dapp/src/index.css` - `frontend-dapp/src/theme-dark.css`, `theme-light.css` - `frontend-dapp/src/pages/LimitOrdersPage.tsx` - `frontend-dapp/src/components/trade/PairNotFoundLinkNotice.tsx` - `frontend-dapp/src/components/trade/InvalidPairLinkNotice.tsx` - `frontend-dapp/src/components/ui/Card.tsx` - `QA_TEMPLATE.md` §10 - `docs/frontend.md` ## Recommended direction 1. Add `docs/design-system.md` — token table, primitives (`shell-panel`, `shell-panel-strong`, `card-neo`, `btn-*`, `tab-neo`, `input-neo`, `label-neo`), typography, spacing, when-to-use rules, icon/unicode guidelines (#411). 2. Define `.btn-neo` in `index.css` (secondary neo outline) **or** replace all `btn-neo` with `btn-muted`. 3. Document status of `.glass` (deprecate or wire to a component). 4. Cross-link from `docs/frontend.md` and `QA_TEMPLATE.md` §10. ## Acceptance criteria - [ ] `docs/design-system.md` exists and names Cyberminimalist Glass System. - [ ] Component matrix covers all `*-neo` / `shell-panel*` primitives. - [ ] `btn-neo` renders correctly on `/limits` single/ladder toggle. - [ ] Pair-not-found / invalid-pair notices use styled secondary button. - [ ] **Screenshot:** `/limits` place mode toggle — both states styled. - [ ] **Screenshot:** Swap page showing `shell-panel` + `card-neo` compliance reference. ## Test plan - Visual manual pass on `/limits`, `/trade` (pair-not-found deep link). - `make lint-frontend` - Optional: add Vitest snapshot or class assertion on `LimitOrdersPage` mode buttons. ## Attack / abuse test plan - N/A (styling/docs). Confirm focus rings (`--focus-ring`) unchanged for a11y. ## Verification criteria - `rg 'btn-neo' frontend-dapp/src` — every usage has matching CSS or uses `btn-muted`. - Design doc linked from `docs/README.md` or `docs/frontend.md`.

PlasticDigits commented

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

(Migrated from gitlab.com)

mentioned in issue #411

PlasticDigits commented

2026-06-25 19:58:47 +00:00

(Migrated from gitlab.com)

Do rename. We want to completely remove neo brutalist design patterns.

PlasticDigits commented

2026-06-25 20:09:22 +00:00

(Migrated from gitlab.com)

mentioned in commit 28bbc602fc

mentioned in commit 28bbc602fc103b8b23cca24e816d1a71a0c6d16e

PlasticDigits commented

2026-06-25 20:09:39 +00:00

(Migrated from gitlab.com)

mentioned in merge request !937

PlasticDigits commented

2026-06-25 20:35:53 +00:00

(Migrated from gitlab.com)

mentioned in commit 950a40388d

mentioned in commit 950a40388d6ef41de4eea5258ddc14c390844fbd

PlasticDigits commented

2026-06-26 06:49:56 +00:00

(Migrated from gitlab.com)

Verification — #415 (PASS)

Verified on main @ 6ffd7f44 (implementation merged via 950a4038 / 28bbc602).

Acceptance criteria

Criterion	Result	How verified
`docs/design-system.md` exists and names Cyberminimalist Glass System	PASS	File present; title + principles table
Component matrix covers `-glass` / `shell-panel` primitives	PASS	Matrix lists `shell-panel`, `shell-panel-strong`, `card-glass`, `btn-`, `tab-glass`, `input-glass`, `badge-glass`, etc.; legacy `*-neo` documented as removed
`btn-neo` / place-mode toggle on `/limits`	PASS	`rg 'btn-neo' frontend-dapp/src` → 0 hits; Playwright: Single=`btn-primary`, Ladder=`btn-muted`; toggling swaps classes
Pair-not-found / invalid-pair notices use styled secondary button	PASS	`PairNotFoundLinkNotice` + `InvalidPairLinkNotice` use `btn-muted`; Vitest `PairNotFoundLinkNotice.test.tsx`; Playwright `/trade/terra1xxx…` → CTA class `btn-muted text-xs`
Screenshot: `/limits` place mode toggle (both states)	PASS	Playwright headless — `/tmp/issue-415-screenshots/limits-single-mode.png`, `limits-ladder-mode.png`
Screenshot: Swap `shell-panel` + `card-glass`	PASS	Playwright — `/tmp/issue-415-screenshots/swap-shell-panel.png`

Test plan

Check	Result	Command / output
No legacy `-neo` in `src/`	PASS	`rg -- '-neo' frontend-dapp/src` → OK
Design doc cross-links	PASS	Linked from `docs/frontend.md`, `docs/README.md`, `QA_TEMPLATE.md` §10, `skills/AGENTS_FRONTEND_DESIGN_SYSTEM.md`
Token alignment	PASS	`python3 scripts/check_design_tokens.py` → OK
Frontend lint	PASS	`make lint-frontend` → 0 errors (5 pre-existing warnings)
Frontend unit tests	PASS	`make test-frontend` → 184 files / 1084 tests passed (incl. `#415` class assertions on `LimitOrdersPage` + `PairNotFoundLinkNotice`)
Focus rings unchanged (a11y)	PASS	`btn-primary` / `btn-muted` retain `:focus-visible` with `var(--focus-ring)` in `index.css`

Comment follow-up (PlasticDigits)

Per issue comment: neo-brutalist patterns removed repo-wide (*-neo → *-glass); design doc reflects deprecation. PASS — aligns with stated direction.

Manual environment

Provisioned LocalTerra (make setup-cloud-localterra --fresh --skip-build), frontend via make dev, Playwright chromium for visual capture.

## Verification — #415 (PASS) Verified on `main` @ `6ffd7f44` (implementation merged via `950a4038` / `28bbc602`). ### Acceptance criteria | Criterion | Result | How verified | |-----------|--------|--------------| | `docs/design-system.md` exists and names Cyberminimalist Glass System | **PASS** | File present; title + principles table | | Component matrix covers `*-glass` / `shell-panel*` primitives | **PASS** | Matrix lists `shell-panel`, `shell-panel-strong`, `card-glass`, `btn-*`, `tab-glass*`, `input-glass`, `badge-glass`, etc.; legacy `*-neo` documented as removed | | `btn-neo` / place-mode toggle on `/limits` | **PASS** | `rg 'btn-neo' frontend-dapp/src` → 0 hits; Playwright: Single=`btn-primary`, Ladder=`btn-muted`; toggling swaps classes | | Pair-not-found / invalid-pair notices use styled secondary button | **PASS** | `PairNotFoundLinkNotice` + `InvalidPairLinkNotice` use `btn-muted`; Vitest `PairNotFoundLinkNotice.test.tsx`; Playwright `/trade/terra1xxx…` → CTA class `btn-muted text-xs` | | Screenshot: `/limits` place mode toggle (both states) | **PASS** | Playwright headless — `/tmp/issue-415-screenshots/limits-single-mode.png`, `limits-ladder-mode.png` | | Screenshot: Swap `shell-panel` + `card-glass` | **PASS** | Playwright — `/tmp/issue-415-screenshots/swap-shell-panel.png` | ### Test plan | Check | Result | Command / output | |-------|--------|------------------| | No legacy `-neo` in `src/` | **PASS** | `rg -- '-neo' frontend-dapp/src` → OK | | Design doc cross-links | **PASS** | Linked from `docs/frontend.md`, `docs/README.md`, `QA_TEMPLATE.md` §10, `skills/AGENTS_FRONTEND_DESIGN_SYSTEM.md` | | Token alignment | **PASS** | `python3 scripts/check_design_tokens.py` → OK | | Frontend lint | **PASS** | `make lint-frontend` → 0 errors (5 pre-existing warnings) | | Frontend unit tests | **PASS** | `make test-frontend` → 184 files / 1084 tests passed (incl. `#415` class assertions on `LimitOrdersPage` + `PairNotFoundLinkNotice`) | | Focus rings unchanged (a11y) | **PASS** | `btn-primary` / `btn-muted` retain `:focus-visible` with `var(--focus-ring)` in `index.css` | ### Comment follow-up (PlasticDigits) Per issue comment: neo-brutalist patterns **removed** repo-wide (`*-neo` → `*-glass`); design doc reflects deprecation. **PASS** — aligns with stated direction. ### Manual environment Provisioned LocalTerra (`make setup-cloud-localterra --fresh --skip-build`), frontend via `make dev`, Playwright chromium for visual capture.

PlasticDigits (Migrated from gitlab.com) closed this issue

2026-06-26 06:50:04 +00:00

PlasticDigits commented

2026-07-13 13:24:43 +00:00

(Migrated from gitlab.com)

mentioned in issue #489