Align the platform look and feel with the devplace main-branch design #164

Merged
retoor merged 4 commits from blindxfish/devplacepy:pr1-terminal-theme into master 2026-08-10 00:28:43 +02:00
Conversation 0 Commits 4 Files Changed 30 +151 -149
blindxfish commented 2026-08-09 22:41:40 +02:00
Contributor
Copy Link

Retheme the whole platform to the devplace.net main-branch design language.

What changed

  • Palette (all via variables.css tokens): deep indigo page (#271b5b) over near-black indigo cards (#13112a/#1a1736), #11101f hairlines, purple-tinted text ramp, burnt-orange primary accent (#b73f1e) with raspberry hover and a rust-to-plum brand gradient.
  • Typography: Trebuchet MS as the UI font (system font, no vendored files).
  • Shape: rounded 8/12/16px radii, the reference's diffuse soft/medium/strong shadows.
  • Flat controls: buttons, tabs, sidebar active links and the FAB drop the gradient + glow (--glow-accent removed); gradients remain only on decorative meters/stripes.
  • Contrast: new --on-accent token swept across every accent-background control.
  • Member home fixes: the Code Farm promo aligns to the dashboard measure; sparse Latest Posts rows fill via auto-fit.
  • Follow-through: theme-color meta, PWA manifest, offline page, avatar fallback SVG, chart palette, chat light-theme overrides, OG image + app icons regenerated, /docs/styles-colors style guide updated; three var() fallback violations and a dead --bg-hover token fixed.

Validation

Full suite run on a clean clone: 3209 passed; the 10 failures (workspace docker tests + quiz AI fallback) reproduce identically on untouched master in the same environment (no docker CLI, no AI gateway) - environmental, not regressions.

🤖 Generated with Claude Code

Retheme the whole platform to the devplace.net main-branch design language. ## What changed - **Palette** (all via `variables.css` tokens): deep indigo page (`#271b5b`) over near-black indigo cards (`#13112a`/`#1a1736`), `#11101f` hairlines, purple-tinted text ramp, burnt-orange primary accent (`#b73f1e`) with raspberry hover and a rust-to-plum brand gradient. - **Typography**: Trebuchet MS as the UI font (system font, no vendored files). - **Shape**: rounded 8/12/16px radii, the reference's diffuse soft/medium/strong shadows. - **Flat controls**: buttons, tabs, sidebar active links and the FAB drop the gradient + glow (`--glow-accent` removed); gradients remain only on decorative meters/stripes. - **Contrast**: new `--on-accent` token swept across every accent-background control. - **Member home fixes**: the Code Farm promo aligns to the dashboard measure; sparse Latest Posts rows fill via auto-fit. - **Follow-through**: theme-color meta, PWA manifest, offline page, avatar fallback SVG, chart palette, chat light-theme overrides, OG image + app icons regenerated, `/docs/styles-colors` style guide updated; three `var()` fallback violations and a dead `--bg-hover` token fixed. ## Validation Full suite run on a clean clone: 3209 passed; the 10 failures (workspace docker tests + quiz AI fallback) reproduce identically on untouched master in the same environment (no docker CLI, no AI gateway) - environmental, not regressions. 🤖 Generated with [Claude Code](https://claude.com/claude-code)
blindxfish added 4 commits 2026-08-09 22:41:41 +02:00 
Retheme every token in variables.css to the terminal design language:
near-black surfaces (#0a0a0f/#111118/#1a1a24), terminal green accent
(#22c55e) with dark on-accent text, gray text ramp, #222233 borders,
sharp 4-8px radii, neutral depth shadows, and JetBrains Mono as the
primary UI font (vendored latin woff2, no CDN).

Follow-through outside the token file: white-on-accent buttons/tabs now
use the new --on-accent token for contrast, three var() fallback
violations shipping the old palette are gone, the dead --bg-hover token
is replaced with --bg-card-hover, avatar fallback SVG, statistics chart
palette, chat light-theme overrides, offline page, PWA manifest,
theme-color meta, OG image + app icons regenerated in the new palette,
and the /docs/styles-colors style guide now documents the new values.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The reference design is the devplace Next.js main branch, not the
terminal branch the previous commit tracked. Swap the token values to
that design language: deep indigo page (#271b5b) over near-black indigo
cards (#13112a/#1a1736), #11101f hairlines, purple-tinted text ramp
(#e9e4ff/#c8c3e5/#9b93c9), burnt-orange primary accent (#b73f1e) with
a raspberry hover (#af3050) and a rust-to-plum brand gradient, white
on-accent text, soft rounded radii (8/12/16px), the reference's diffuse
soft/medium/strong shadows, a warm accent glow, and Trebuchet MS as the
UI font (system font - the vendored JetBrains Mono files are removed
along with their base.html link).

Follow-through updated to match: theme-color meta + PWA manifest
(#271b5b), offline page, avatar fallback SVG, statistics chart palette
(brand ramp), chat light-theme overrides, OG image + app icons
regenerated in the new palette, and the /docs/styles-colors guide.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The signed-in dashboard is a 1200px two-column grid, but the shared
Code Farm promo section stayed at the guest page's 960px centered
measure, so it floated misaligned under the dashboard columns. A
landing-game-dashboard modifier (applied only when a user is signed
in) stretches it to the dashboard's own measure and gutters. The
Latest Posts grid becomes repeat(auto-fit, minmax(320px, 1fr)) so a
single post fills the row instead of leaving a dead half-column while
two or more still lay out as the original two columns.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Flatten control accents: no gradient or glow on buttons, tabs, or the FAB
Some checks failed
DevPlace CI / test (pull_request) Has been cancelled
Details
3fca4be72e 
The reference design uses flat primary buttons, so every interactive
control drops the brand gradient and the accent glow: .btn-primary
(flat accent, accent-hover on hover), the feed nav tabs, the projects
tabs, the sidebar active link, and the create-post FAB (which keeps a
neutral elevation shadow). Gradients remain only on decorative meters
and stripes (XP fills, progress bars, the project card top stripe).
The now-unused --glow-accent token is removed, and deepsearch.css
loses its var() fallback on the progress gradient.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
retoor merged commit f3b91ac75b into master 2026-08-10 00:28:43 +02:00
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No Label
Milestone
Clear milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
No Assignees
1 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: retoor/devplacepy#164
No description provided.
Delete Branch "blindxfish/devplacepy:pr1-terminal-theme"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?