Replace app.css with playground design system + delete colors.ts

forgejo_admin commented

2026-03-27 21:13:57 +00:00

Owner

Type

Feature

Lineage

First ticket in the SvelteKit port pipeline. Design decisions documented on #65.

Repo

forgejo_admin/pal-e-app

User Story

As a developer porting the playground to SvelteKit,
I want the design system foundation in place (CSS + layout),
So that page-level ports are mechanical copy-paste with data bindings.

Context

The playground app.css at ~/pal-e-docs-playground/app.css is the canonical design system. It replaces the current src/app.css in pal-e-app. The colors.ts file is an intermediary that breaks the copy-paste pipeline — nuke it and replace all references with CSS custom properties.

Also implement the sidebar layout from the playground — this is the foundational layout component all routes will use.

File Targets

src/app.css — replace with playground app.css content, adapted for SvelteKit (scoped vars, import paths)
src/lib/colors.ts — DELETE
src/routes/+layout.svelte — implement sidebar layout matching playground HTML structure
Any files importing from colors.ts — update to use CSS custom properties

Acceptance Criteria

src/app.css replaced with playground design system
colors.ts deleted, all references migrated to CSS vars
Sidebar layout component implemented in +layout.svelte
Navigation links in sidebar match playground structure
Existing routes still render (may look different, but no crashes)
Mobile responsive (sidebar collapses on small screens)

Test Expectations

App builds without errors (npm run build)
No TypeScript errors from deleted colors.ts references
Run command: cd ~/pal-e-app && npm run build

Constraints

Copy playground CSS literally — don't reinterpret
Sidebar HTML structure from playground index.html
Keep existing route files functional (content may shift but shouldn't break)

Checklist

CSS replaced
colors.ts deleted
Layout component done
Build passes
No broken imports

forgejo_admin/pal-e-app#65 — alignment review with gap list
forgejo_admin/pal-e-docs-playground — source prototype
board-pal-e-docs — project board

### Type Feature ### Lineage First ticket in the SvelteKit port pipeline. Design decisions documented on #65. ### Repo `forgejo_admin/pal-e-app` ### User Story As a developer porting the playground to SvelteKit, I want the design system foundation in place (CSS + layout), So that page-level ports are mechanical copy-paste with data bindings. ### Context The playground `app.css` at `~/pal-e-docs-playground/app.css` is the canonical design system. It replaces the current `src/app.css` in pal-e-app. The `colors.ts` file is an intermediary that breaks the copy-paste pipeline — nuke it and replace all references with CSS custom properties. Also implement the sidebar layout from the playground — this is the foundational layout component all routes will use. ### File Targets - `src/app.css` — replace with playground app.css content, adapted for SvelteKit (scoped vars, import paths) - `src/lib/colors.ts` — DELETE - `src/routes/+layout.svelte` — implement sidebar layout matching playground HTML structure - Any files importing from `colors.ts` — update to use CSS custom properties ### Acceptance Criteria - [ ] `src/app.css` replaced with playground design system - [ ] `colors.ts` deleted, all references migrated to CSS vars - [ ] Sidebar layout component implemented in `+layout.svelte` - [ ] Navigation links in sidebar match playground structure - [ ] Existing routes still render (may look different, but no crashes) - [ ] Mobile responsive (sidebar collapses on small screens) ### Test Expectations - [ ] App builds without errors (`npm run build`) - [ ] No TypeScript errors from deleted colors.ts references - Run command: `cd ~/pal-e-app && npm run build` ### Constraints - Copy playground CSS literally — don't reinterpret - Sidebar HTML structure from playground index.html - Keep existing route files functional (content may shift but shouldn't break) ### Checklist - [ ] CSS replaced - [ ] colors.ts deleted - [ ] Layout component done - [ ] Build passes - [ ] No broken imports ### Related - `forgejo_admin/pal-e-app#65` — alignment review with gap list - `forgejo_admin/pal-e-docs-playground` — source prototype - `board-pal-e-docs` — project board