feat: Westside Basketball Keycloak login theme

### Type Feature ### Lineage `plan-wkq` → Phase 15 (Production Port — SPA Rebuild) Keycloak login is the entry point for the Westside app. A branded login page completes the user experience continuity. ### Repo `forgejo_admin/pal-e-platform` ### User Story As a Westside Basketball player or parent I want the Keycloak login page to match the Westside app's dark theme So that the login experience feels like part of the app, not a jarring redirect to a generic form ### Context Keycloak is deployed via raw Kubernetes manifests in `terraform/main.tf` using the stock `quay.io/keycloak/keycloak:26.0.7` image with zero theme customization. The login page is the default Keycloak light-mode UI — visually disconnected from the Westside app's dark-mode design system (`#0a0a0a` bg, `#d42026` red, `#ffd700` gold). Keycloak supports per-realm themes via a directory structure under `/opt/keycloak/themes/`. A minimal CSS-only theme inheriting from the default `keycloak` parent theme is sufficient. Theme files will be mounted via a Kubernetes ConfigMap. Design tokens sourced from `~/westside-app/src/app.css`: - `--color-black: #0a0a0a` (page background) - `--color-dark: #141414` (card/surface) - `--color-gray-800: #262626` (inputs, borders) - `--color-red: #d42026` (primary brand — buttons) - `--color-red-hover: #e8333a` (button hover) - `--color-yellow: #ffd700` (gold — secondary accent) - `--color-white: #ffffff` (text) - `--radius: 4px` ### File Targets Files the agent should create: - `keycloak/themes/westside/login/theme.properties` — parent=keycloak, declares CSS override - `keycloak/themes/westside/login/resources/css/login.css` — color overrides (~50-80 lines) Files the agent should modify: - `terraform/main.tf` — add `kubernetes_config_map_v1.keycloak_westside_theme`, add volume + volume_mount to Keycloak deployment Files the agent should NOT touch: - `~/westside-app/src/app.css` — source of truth, read-only for this work - Network policies, secrets, or Keycloak env vars — no changes needed ### Acceptance Criteria - [ ] Login page background is dark (#0a0a0a), not default white - [ ] Login card uses dark surface (#141414) with subtle borders (#262626) - [ ] Primary button is Westside red (#d42026) with hover (#e8333a) - [ ] Gold (#ffd700) accent visible in header/branding area - [ ] Input fields are dark-themed with light text - [ ] Mobile-responsive at 390px viewport — no horizontal overflow - [ ] Login/logout flow works end-to-end (theme doesn't break form submission) - [ ] Theme persists after pod restart (ConfigMap-backed, not ephemeral) - [ ] No flash of default theme before custom CSS loads ### Test Expectations - [ ] Visual: Playwright screenshot at desktop (1280px) and mobile (390px) of login page - [ ] Visual: Side-by-side comparison with westside-app to confirm brand consistency - [ ] Functional: Complete login flow (enter creds → submit → redirect to app) - [ ] Functional: Complete logout flow (app → Keycloak logout → redirect) - [ ] Infra: `tofu plan -lock=false` shows only ConfigMap + deployment volume changes - [ ] Infra: `tofu apply` succeeds, pod restarts with theme mounted - Run command: `cd ~/pal-e-platform/terraform && tofu plan -lock=false` ### Constraints - CSS-only override — inherit from `keycloak` parent theme, don't copy/fork templates - No custom Docker image build — use ConfigMap volume mount approach - Follow playground CSS philosophy: vanilla CSS custom properties, no build step - Theme directory structure must match Keycloak 26.x conventions - `tofu plan` must include `-lock=false` (per feedback_tofu_lock_false) ### Checklist - [ ] PR opened - [ ] Tests pass (tofu validate + plan) - [ ] No unrelated changes - [ ] Lucas visual sign-off on phone ### Related - `project-westside-basketball` — project this affects - `plan-wkq` → Phase 15 — parent plan phase - `~/westside-app/src/app.css` — design token source of truth

forgejo_admin commented

2026-03-21 16:04:20 +00:00

Owner

Type

Feature

Lineage

plan-wkq → Phase 15 (Production Port — SPA Rebuild)
Keycloak login is the entry point for the Westside app. A branded login page completes the user experience continuity.

Repo

forgejo_admin/pal-e-platform

User Story

As a Westside Basketball player or parent
I want the Keycloak login page to match the Westside app's dark theme
So that the login experience feels like part of the app, not a jarring redirect to a generic form

Context

Keycloak is deployed via raw Kubernetes manifests in terraform/main.tf using the stock quay.io/keycloak/keycloak:26.0.7 image with zero theme customization. The login page is the default Keycloak light-mode UI — visually disconnected from the Westside app's dark-mode design system (#0a0a0a bg, #d42026 red, #ffd700 gold).

Keycloak supports per-realm themes via a directory structure under /opt/keycloak/themes/. A minimal CSS-only theme inheriting from the default keycloak parent theme is sufficient. Theme files will be mounted via a Kubernetes ConfigMap.

Design tokens sourced from ~/westside-app/src/app.css:

--color-black: #0a0a0a (page background)
--color-dark: #141414 (card/surface)
--color-gray-800: #262626 (inputs, borders)
--color-red: #d42026 (primary brand — buttons)
--color-red-hover: #e8333a (button hover)
--color-yellow: #ffd700 (gold — secondary accent)
--color-white: #ffffff (text)
--radius: 4px

File Targets

Files the agent should create:

keycloak/themes/westside/login/theme.properties — parent=keycloak, declares CSS override
keycloak/themes/westside/login/resources/css/login.css — color overrides (~50-80 lines)

Files the agent should modify:

terraform/main.tf — add kubernetes_config_map_v1.keycloak_westside_theme, add volume + volume_mount to Keycloak deployment

Files the agent should NOT touch:

~/westside-app/src/app.css — source of truth, read-only for this work
Network policies, secrets, or Keycloak env vars — no changes needed

Acceptance Criteria

Login page background is dark (#0a0a0a), not default white
Login card uses dark surface (#141414) with subtle borders (#262626)
Primary button is Westside red (#d42026) with hover (#e8333a)
Gold (#ffd700) accent visible in header/branding area
Input fields are dark-themed with light text
Mobile-responsive at 390px viewport — no horizontal overflow
Login/logout flow works end-to-end (theme doesn't break form submission)
Theme persists after pod restart (ConfigMap-backed, not ephemeral)
No flash of default theme before custom CSS loads

Test Expectations

Visual: Playwright screenshot at desktop (1280px) and mobile (390px) of login page
Visual: Side-by-side comparison with westside-app to confirm brand consistency
Functional: Complete login flow (enter creds → submit → redirect to app)
Functional: Complete logout flow (app → Keycloak logout → redirect)
Infra: tofu plan -lock=false shows only ConfigMap + deployment volume changes
Infra: tofu apply succeeds, pod restarts with theme mounted
Run command: cd ~/pal-e-platform/terraform && tofu plan -lock=false

Constraints

CSS-only override — inherit from keycloak parent theme, don't copy/fork templates
No custom Docker image build — use ConfigMap volume mount approach
Follow playground CSS philosophy: vanilla CSS custom properties, no build step
Theme directory structure must match Keycloak 26.x conventions
tofu plan must include -lock=false (per feedback_tofu_lock_false)