fix: align design tokens with landing page color scheme (Phase 10e-2a)

forgejo_admin commented

2026-03-15 03:51:52 +00:00

Author

Owner

PR #27 Review

DOMAIN REVIEW

Tech stack: SvelteKit / CSS custom properties (design tokens)

This is a CSS-only token value update -- 12 custom property values in src/app.css and 1 inline style sync in src/app.html. The changes align the westside-app palette with the landing page (ldraney/west-side-basketball). No structural changes, no new components, no logic changes.

Token propagation: All route components use var() references for these tokens. The propagation model is sound -- changing values in :root flows everywhere automatically.

FOUC prevention: The app.html inline color is correctly updated from #e0e0e0 to #f0f0f0 to match the new --color-text value. The comment documenting this sync requirement is a good addition.

Collapsed semantic distinctions (2 cases):

--color-text-muted and --color-text-dim are now both #a3a3a3. These were previously #666 and #888 respectively -- distinct values serving different purposes. Both are actively used across 40+ references in the codebase. If the intent is to collapse them, one should be removed or aliased; if they should remain distinct, one needs a different value.
--color-border and --color-border-subtle are now both #262626. Previously #1a1a1a and #222. Same concern.

Accessibility (contrast ratios against #0a0a0a background):

--color-text: #f0f0f0 = ~18.3:1 -- excellent (AAA)
--color-text-muted/dim: #a3a3a3 = ~8.4:1 -- good (AAA)
--color-text-subtle: #d4d4d4 = ~14.2:1 -- excellent (AAA)
--color-text-faint: #737373 = ~4.0:1 -- borderline, fails WCAG AA for normal text (4.5:1 required). However, this is an improvement from the previous #555 (~2.7:1). If text-faint is used only for decorative/non-essential text, this is acceptable.

Stale hardcoded colors (pre-existing, not introduced by this PR):

/home/ldraney/westside-app/src/routes/admin/users/+page.svelte line 14: admin: '#c41230' -- uses the OLD brand red instead of the new #d42026.
Same file, line 253: fallback colors #666 and #1a1a1a are old values that should reference the updated palette.

These are pre-existing and outside the scope of a token-value-only PR, but since this PR's purpose is color alignment, they should at least be tracked.

BLOCKERS

None. This PR changes only CSS custom property values and one inline style. There is:

No new functionality requiring test coverage
No user input handling
No secrets or credentials
No auth/security logic

NITS

Collapsed tokens -- --color-text-muted and --color-text-dim now map to the same value (#a3a3a3). Same for --color-border and --color-border-subtle (both #262626). Consider either giving them distinct values to preserve the semantic gradient, or documenting that they are intentionally identical aliases. Not a blocker since both were close before.
Pre-existing stale hardcoded color -- admin/users/+page.svelte line 14 still uses #c41230 (old brand red). This file has inline ROLE_COLORS, ROLE_BG, and ROLE_BORDER maps that bypass the design token system entirely. Worth a follow-up issue to migrate these to CSS custom properties.
--color-text-faint contrast -- #737373 on #0a0a0a yields ~4.0:1 contrast, just below WCAG AA (4.5:1). If this token is used for non-essential/decorative text only, it is acceptable. If used for meaningful content, consider bumping to #7a7a7a or higher.

SOP COMPLIANCE

Branch named after issue (26-align-design-tokens-with-landing-page-co)
PR body has Summary, Changes, Test Plan, Related
Related references plan slug (plan-2026-03-08-tryout-prep Phase 10e-2a)
Closes #26 present in Related
No secrets committed
No unnecessary file changes (2 files, tightly scoped)
Commit messages are descriptive

PROCESS OBSERVATIONS

Change failure risk: LOW. CSS-only value changes with no structural modifications. The token system ensures consistent propagation. Risk is limited to visual regression, which is easily caught by inspection.
Deployment frequency: NEUTRAL. Small, well-scoped PR that should merge quickly.
Follow-up needed: The stale hardcoded #c41230 in admin/users/+page.svelte should be tracked as a separate issue to complete the color alignment effort.

VERDICT: APPROVED

## PR #27 Review ### DOMAIN REVIEW **Tech stack:** SvelteKit / CSS custom properties (design tokens) This is a CSS-only token value update -- 12 custom property values in `src/app.css` and 1 inline style sync in `src/app.html`. The changes align the westside-app palette with the landing page (`ldraney/west-side-basketball`). No structural changes, no new components, no logic changes. **Token propagation:** All route components use `var()` references for these tokens. The propagation model is sound -- changing values in `:root` flows everywhere automatically. **FOUC prevention:** The `app.html` inline `color` is correctly updated from `#e0e0e0` to `#f0f0f0` to match the new `--color-text` value. The comment documenting this sync requirement is a good addition. **Collapsed semantic distinctions (2 cases):** - `--color-text-muted` and `--color-text-dim` are now both `#a3a3a3`. These were previously `#666` and `#888` respectively -- distinct values serving different purposes. Both are actively used across 40+ references in the codebase. If the intent is to collapse them, one should be removed or aliased; if they should remain distinct, one needs a different value. - `--color-border` and `--color-border-subtle` are now both `#262626`. Previously `#1a1a1a` and `#222`. Same concern. **Accessibility (contrast ratios against `#0a0a0a` background):** - `--color-text: #f0f0f0` = ~18.3:1 -- excellent (AAA) - `--color-text-muted/dim: #a3a3a3` = ~8.4:1 -- good (AAA) - `--color-text-subtle: #d4d4d4` = ~14.2:1 -- excellent (AAA) - `--color-text-faint: #737373` = ~4.0:1 -- borderline, fails WCAG AA for normal text (4.5:1 required). However, this is an improvement from the previous `#555` (~2.7:1). If `text-faint` is used only for decorative/non-essential text, this is acceptable. **Stale hardcoded colors (pre-existing, not introduced by this PR):** - `/home/ldraney/westside-app/src/routes/admin/users/+page.svelte` line 14: `admin: '#c41230'` -- uses the OLD brand red instead of the new `#d42026`. - Same file, line 253: fallback colors `#666` and `#1a1a1a` are old values that should reference the updated palette. These are pre-existing and outside the scope of a token-value-only PR, but since this PR's purpose is color alignment, they should at least be tracked. ### BLOCKERS None. This PR changes only CSS custom property values and one inline style. There is: - No new functionality requiring test coverage - No user input handling - No secrets or credentials - No auth/security logic ### NITS 1. **Collapsed tokens** -- `--color-text-muted` and `--color-text-dim` now map to the same value (`#a3a3a3`). Same for `--color-border` and `--color-border-subtle` (both `#262626`). Consider either giving them distinct values to preserve the semantic gradient, or documenting that they are intentionally identical aliases. Not a blocker since both were close before. 2. **Pre-existing stale hardcoded color** -- `admin/users/+page.svelte` line 14 still uses `#c41230` (old brand red). This file has inline `ROLE_COLORS`, `ROLE_BG`, and `ROLE_BORDER` maps that bypass the design token system entirely. Worth a follow-up issue to migrate these to CSS custom properties. 3. **`--color-text-faint` contrast** -- `#737373` on `#0a0a0a` yields ~4.0:1 contrast, just below WCAG AA (4.5:1). If this token is used for non-essential/decorative text only, it is acceptable. If used for meaningful content, consider bumping to `#7a7a7a` or higher. ### SOP COMPLIANCE - [x] Branch named after issue (`26-align-design-tokens-with-landing-page-co`) - [x] PR body has Summary, Changes, Test Plan, Related - [x] Related references plan slug (`plan-2026-03-08-tryout-prep` Phase 10e-2a) - [x] `Closes #26` present in Related - [x] No secrets committed - [x] No unnecessary file changes (2 files, tightly scoped) - [x] Commit messages are descriptive ### PROCESS OBSERVATIONS - **Change failure risk: LOW.** CSS-only value changes with no structural modifications. The token system ensures consistent propagation. Risk is limited to visual regression, which is easily caught by inspection. - **Deployment frequency: NEUTRAL.** Small, well-scoped PR that should merge quickly. - **Follow-up needed:** The stale hardcoded `#c41230` in `admin/users/+page.svelte` should be tracked as a separate issue to complete the color alignment effort. ### VERDICT: APPROVED

2026-03-15 03:50:10 +00:00

Summary

Aligns the westside-app CSS custom properties with the landing page (ldraney/west-side-basketball) color palette. Token values only — no structural changes. Every route already uses var() references, so the new values propagate everywhere automatically.

Changes

src/app.css — updated 12 token values:
- Brand red: #c41230 → #d42026 (matches landing page --color-red)
- Brand hover: #a00e28 → #e8333a (matches landing page --color-red-hover)
- Link: #c41230 → #d42026
- Text: #e0e0e0 → #f0f0f0 (matches --color-gray-100)
- Text muted: #666 → #a3a3a3 (matches --color-gray-400)
- Text dim: #888 → #a3a3a3
- Text subtle: #aaa → #d4d4d4 (matches --color-gray-200)
- Text faint: #555 → #737373 (matches --color-gray-600)
- Card bg: #111 → #141414 (matches --color-dark)
- Border: #1a1a1a → #262626 (matches --color-gray-800)
- Border subtle: #222 → #262626
- Added FOUC prevention comment documenting app.html ↔ app.css sync requirement
src/app.html — updated inline text color #e0e0e0 → #f0f0f0 to stay in sync

Test Plan

npm run build passes
Visual: app colors match landing page brand identity
No white flash (inline styles still render before JS)

Review Checklist

No secrets committed
No unnecessary file changes
Commit messages are descriptive
Token values only — no structural changes

Closes #26
plan-2026-03-08-tryout-prep — Phase 10e-2a color alignment
PR #23 — created the design tokens being updated

## Summary Aligns the westside-app CSS custom properties with the landing page (`ldraney/west-side-basketball`) color palette. Token values only — no structural changes. Every route already uses `var()` references, so the new values propagate everywhere automatically. ## Changes - `src/app.css` — updated 12 token values: - Brand red: `#c41230` → `#d42026` (matches landing page `--color-red`) - Brand hover: `#a00e28` → `#e8333a` (matches landing page `--color-red-hover`) - Link: `#c41230` → `#d42026` - Text: `#e0e0e0` → `#f0f0f0` (matches `--color-gray-100`) - Text muted: `#666` → `#a3a3a3` (matches `--color-gray-400`) - Text dim: `#888` → `#a3a3a3` - Text subtle: `#aaa` → `#d4d4d4` (matches `--color-gray-200`) - Text faint: `#555` → `#737373` (matches `--color-gray-600`) - Card bg: `#111` → `#141414` (matches `--color-dark`) - Border: `#1a1a1a` → `#262626` (matches `--color-gray-800`) - Border subtle: `#222` → `#262626` - Added FOUC prevention comment documenting `app.html` ↔ `app.css` sync requirement - `src/app.html` — updated inline text color `#e0e0e0` → `#f0f0f0` to stay in sync ## Test Plan - [x] `npm run build` passes - [ ] Visual: app colors match landing page brand identity - [ ] No white flash (inline styles still render before JS) ## Review Checklist - [x] No secrets committed - [x] No unnecessary file changes - [x] Commit messages are descriptive - [x] Token values only — no structural changes ## Related - Closes #26 - `plan-2026-03-08-tryout-prep` — Phase 10e-2a color alignment - PR #23 — created the design tokens being updated

forgejo_admin added 1 commit

fix: align design tokens with landing page color scheme d3fba6cf8d

Update CSS custom properties in app.css to match the west-side-basketball
landing page palette. Brand red #c41230 → #d42026, text grays aligned to
Tailwind neutral scale (#f0f0f0/#d4d4d4/#a3a3a3/#737373), borders unified
to #262626. App.html inline text color synced to #f0f0f0.

Closes #26

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>