diff --git a/ARCHITECTURE_DECISIONS.md b/ARCHITECTURE_DECISIONS.md index 54b7fdd..fcc5a31 100644 --- a/ARCHITECTURE_DECISIONS.md +++ b/ARCHITECTURE_DECISIONS.md @@ -5044,6 +5044,181 @@ Store/Google Play med UGC+GPS, men et eget, avgrenset prosjekt (admin- panel, databasefiltrering, 24-timers responstid), ikke noe som hører hjemme i samme runde som en enkel aldersgrense. +--- + +## ADR-052: Full clubhouse-overtagelse (designrunden) — 2026-08-10 + +Brukeren ba om "designrunden" og valgte, via `AskUserQuestion`, det +bredeste av tre foreslåtte omfang: **"Full overtagelse, alt på én +gang"** -- resten av appen (unntatt ny-runde-veiviserens egen `nr-*`- +palett, se ADR-048) skulle over på "clubhouse"-paletten +(ADR-047-oppfølgingen, hittil kun 7 filer: innlogging, dashbord, +bunnnav, velkommen) i én samlet runde, fremfor den tidligere planen om +gradvis retemaing skjerm for skjerm når de likevel røres. + +**Beslutning A — CSS-variabel-remap i `globals.css`, IKKE per-fil +className-omskriving.** Utforsking (Explore-agent) bekreftet to +avgjørende fakta: (1) `components/ui/*` (button/card/badge/input osv.) +og samtlige ~90 gjenværende "Forest Green"-filer er RENE +token-konsumenter -- et grep etter hardkodede `bg-white`/`text-gray-*`/ +`slate-*` utenfor de 7 clubhouse-filene ga null treff. (2) Clubhouse- +paletten var allerede definert som egne CSS-variabler +(`--tee-strong`/`--clubhouse-*`) additivt i samme fil. Konsekvens: +`:root`s shadcn-tokens (`--background`, `--card`, `--primary` osv.) +ble redefinert til å KOPIERE clubhouse sine verdier direkte, i stedet +for å endre className i 90 filer. `bg-primary`/`bg-card`/ +`text-muted-foreground` osv. beholder navnene sine over hele appen -- +det som endret seg er hvilken farge de peker på. Ingen av de ~90 +filene ble rørt. + +`--destructive`, `--brand-orange(-foreground)`, `--info(-foreground)`, +`--gold(-foreground)`, `--chart-1..6` er BEVISST uendret -- de er +distinkte semantiske signalfarger (feil/fare, sekundær-CTA, nøytral +info, personlig rekord, statistikk-skala), ikke del av +"nøytral/primær"-identiteten paletten styrer. `--brand-orange` +(opprinnelig `#ff5722`) er dessuten allerede nesten identisk med +clubhouse sin `--cup` (`#ff5427`) -- samme merkevarefamilie (ADR-009/ +016), ingen synlig dissonans. + +**Kontrast-korreksjon funnet FØR utrulling, ikke etterpå:** dagens +`--primary-foreground` var nesten-svart (riktig for den gamle LYSE +grønne primærfargen). Clubhouse sin `--tee-strong` (`#2f6b1e`) er en +MØRK, mettet grønn, brukt i eksisterende kode med `text-white` +(`velkommen.tsx`). `--primary-foreground` ble derfor satt til hvit ved +remap -- uten denne rettelsen ville teksten på hver primærknapp i hele +appen blitt ulesbar mørk-på-mørk umiddelbart ved deploy. + +**Beslutning B — mørk variant designet av V0 på bestilling, ikke +oppfunnet av Claude.** Clubhouse hadde ingen mørk-modus-variant (kun +"fast lys-modus" på de 7 opprinnelige sidene). Bruker fikk valget +(`AskUserQuestion`) mellom "fjern mørk modus, hele appen blir fast +lys" og "lag et prompt til V0 om å designe en mørk variant" -- valgte +sistnevnte. Claude-forfattet V0-prompt ga V0 de ti låste lyse +clubhouse-verdiene som fasit-referanse og ba om et rent fargesvar +(ingen kode/komponenter) for et mørk-modus-motstykke, med eksplisitt +WCAG AA-kontrastkrav. V0 svarte (limt inn av bruker som en full +prosjekt-zip, `globals.css`-diffen inneholdt kun den nye `.dark`- +blokken) med: `--tee: #a3d165`, `--tee-strong: #3c8226`, +`--cup: #ff6a3d`, `--cup-strong: #ff8355`, `--clubhouse-bg: #131a0f`, +`--clubhouse-card: #1d2616`, `--clubhouse-ink: #eef3e6`, +`--clubhouse-muted: #a7b598`, `--clubhouse-border: #34402a`, +`--clubhouse-field: #26301d`. Claude verifiserte V0s egne oppgitte +kontrasttall med en uavhengig WCAG-beregning (ikke bare tillit til V0s +kommentar) -- alle stemte eksakt: ink/bg 15.7:1, muted/bg 8.2:1, +muted/card 7.2:1, hvit/tee-strong 4.76:1 (så vidt over AA-grensen på +4.5:1, verifisert med vilje siden det var det trangeste tallet). + +**Beslutning C — ingen className-endring trengtes i de 7 opprinnelige +clubhouse-filene for mørk-modus-støtte.** Disse bruker eksplisitte +`bg-clubhouse-bg`/`text-tee-strong`-klasser (ikke de generiske +`bg-background`/`text-primary`-navnene). Opprinnelig plan (se +plan-fil) antok disse måtte skrives om for å følge mørk modus. Viste +seg unødvendig: siden Tailwinds `@theme inline` genererer disse +klassene som ren `var(--tee-strong)`-referanse, og en `.dark`-blokk +(+ tilsvarende `@media (prefers-color-scheme: dark)`-blokk) for de RÅ +`--tee`/`--cup`/`--clubhouse-*`-variablene ble lagt til samtidig (av +symmetri-/fullstendighetshensyn, se Beslutning A), arver disse 7 +filene mørk modus automatisk via vanlig CSS-variabel-cascade -- helt +uavhengig av om de bruker `bg-clubhouse-bg` eller `bg-background` som +klassenavn. Ingen kode i disse 7 filene endret. + +App-en har INGEN manuell mørk/lys-bryter (`app/layout.tsx` har ingen +`ThemeProvider`/`next-themes`, kun `@media (prefers-color-scheme: +dark)`) -- mørk modus er og forblir rent OS-styrt. + +**Liten tilleggsrettelse i samme runde:** `app/layout.tsx`s +`themeColor`-metadata (nettleser-/statuslinje-tint, brukt av PWA- +installasjon) pekte fortsatt på de gamle fargene (`#8BC24A`/ +`#1c261d`) -- oppdatert til de nye bakgrunnsfargene (`#f3f6ec`/ +`#131a0f`), samme "rett opportunistisk opp når den likevel røres"- +prinsipp som tilgjengelighetsregelen i CLAUDE.md. + +**Scratch-verifisert** (full stack: scratch-DB med alle 61 +migrasjoner, `teecup_app_dr1`-rolle, hyphenert scratch-MinIO, scratch +API- og frontend-container, ekte seedet data via de faktiske API- +endepunktene -- personlig bane, runde, fem hullscore, IKKE rå SQL mot +domenetabellene). `tsc --noEmit` rent, ekte produksjonsbuild av +frontend rent (samme build som ville kjørt i `docker compose build`). +Browserverifisert i ekte nettleser (Chrome DevTools MCP, +`emulate colorScheme`) i BÅDE lys og mørk modus på: `/logg-inn` (alle +tilstander, uendret utseende), `/velkommen` (låst-profil-siden), +`/dashboard` (tom + med ekte seedet rundekort), `/my-rounds/[id]` +(scoreførings-hovedskjermen, appens største fil, 6726 linjer -- +tidligere Forest Green, nå automatisk clubhouse via remap), +scorekort-tabellen (tett datagrid), `/account` (skjematung side). +Alle konsistente, god kontrast, ingen konsollfeil utover en harmløs +PWA-installasjons-infomelding. `/my-rounds/new` (ny-runde-veiviseren) +bekreftet visuelt UENDRET -- ingen smitte fra remappen inn i +`nr-*`-paletten. `BottomNav`s bevisste palett-nøytrale "flytende hvit +flate" (se CHANGELOG punkt 40) forblir hvit i mørk modus også -- dette +er et eksisterende, bevisst designvalg fra V0, ikke en regresjon fra +denne runden. `teecup_db`s ACL bekreftet uendret før/etter, alle +scratch-ressurser (DB, rolle, MinIO-volum, container-images) ryddet +opp fullstendig. + +**Bevisst utenfor omfang:** dette er en FARGE-/identitetsovertagelse, +ikke en layout-/komponent-redesign av de ~90 filene -- de beholder sin +eksisterende struktur, kun ny fargeidentitet arvet automatisk. Egen, +fremtidig runde om noen av disse skjermene også trenger et +layoutløft, ikke besluttet eller påbegynt her. + +--- + +## ADR-053: Ny-runde-veiviseren retemaet til clubhouse — 2026-08-10 + +Rett etter ADR-052 ba brukeren om at ny-runde-veiviseren (`nr-*`- +paletten, bevisst holdt utenfor ADR-052 som en tredje, uavhengig V0- +utforsking) også skulle få "det nye designet". + +**Samme remap-prinsipp som ADR-052, samme fil.** De 16 `--nr-*`- +variablene i `globals.css` er den ENESTE kilden komponentene i +`components/ny-runde/*` leser (via rå `var(--nr-x)`-arbitrary-syntaks, +ikke `@theme inline`/Tailwind-klassenavn som resten av appen) -- et +grep bekreftet null hardkodet hex i alle 11 filer. Kun disse 16 +variablenes VERDIER ble endret; ingen av de 11 filene rørt. + +**Hvilke av de 16 som ble byttet til clubhouse, og hvilke som beholdt +sin opprinnelige, distinkte hue:** `--nr-bg/-surface/-surface-2/-ink/ +-muted/-border/-accent/-accent-ink` byttet til de tilsvarende +clubhouse-verdiene (samme kilde som ADR-052, lys OG mørk). `--nr-danger +(-soft)`/`--nr-ok(-soft)` beholdt sin opprinnelige røde/grønne hue +UENDRET i lys modus -- samme prinsipp som `--destructive` i ADR-052 (en +distinkt semantisk signalfarge, ikke del av identiteten paletten +styrer). Disse fire fikk likevel NYE mørke varianter (`--nr-danger: +#ca655d`, `--nr-danger-soft: #382516`, `--nr-ok: #6da985`, `--nr-ok- +soft: #1d371f`) siden `.nr` aldri hadde noen mørk-modus-støtte i det +hele tatt før nå -- de opprinnelige lyse "soft"-bakgrunnene (pastellrosa/ +-grønn ment for en hvit flate) ville sett ødelagt ut mot en mørk +overflate, så disse ble tilpasset mørk bakgrunn med samme +alpha-blande-teknikk som under. + +**Fire variabler uten direkte clubhouse-kilde, avledet (ikke +oppfunnet fritt):** `--nr-faint`, `--nr-border-strong`, `--nr-accent- +soft`, `--nr-accent-ring` fantes ikke i clubhouse sitt sett på ti. Disse +ble alfa-blandet fra clubhouse sine allerede godkjente farger (f.eks. +`--nr-accent-soft` = clubhouse-bg blandet 14% med `tee`, samme visuelle +rolle som `bg-tee/10`-mønsteret allerede brukt andre steder i +clubhouse-filene). `--nr-faint` sin kontrast ble eksplisitt kalibrert +til å ALDRI havne under originalens egen kontrast (2.61:1 lys / mot +`--nr-bg`) -- endte på 3.28:1 lys / 4.64:1 mørk, komfortabelt over +originalen, ikke bare en tilfeldig fargeblanding. + +**Scratch-verifisert** (eget scratch-miljø, samme fulle oppsett som +ADR-052 -- ny scratch-DB/rolle/MinIO/API/frontend-container). +`tsc --noEmit` rent. Browserverifisert i ekte nettleser i BÅDE lys og +mørk modus: bane-valg-steget, "Egen bane"-søket (øver `--nr-faint` i en +tom-tilstand-boks), og det tette hull-for-hull par/stroke-indeks- +skjemaet (18-raders tabell med dropdowns -- samme datatett-grid-test +som scorekortet i ADR-052). Alle konsistente, god kontrast. Ingen nye +konsollfeil (de tre "issue"-varslene som vises der -- manglende +`autocomplete`/`id`-attributter -- er uendret fra FØR denne runden, +altså forhåndseksisterende i selve V0-eksportens markup, ikke noe denne +CSS-only-endringen rørte eller kan ha forårsaket). Scratch-ressurser +ryddet opp fullstendig, `teecup_db`s ACL bekreftet uendret. + +**Bevisst utenfor omfang:** samme som ADR-052 -- ren fargeovertagelse, +ingen layout-/strukturendring i veiviserens 11 filer. + Disse må avklares før eller under de relevante fasene: 1. **Sesjons-secret:** TeeOff lar `PUBLIC_SESSION_SECRET` falle tilbake på diff --git a/CHANGELOG.md b/CHANGELOG.md index fa0c7a3..cf80c80 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9883,5 +9883,150 @@ Neste steg: miljøet (DB, rolle, MinIO, API- og frontend-container/-images) ryddet opp fullstendig, `teecup_db`s ACL bekreftet uendret. - **Ikke rullet ut ennå** — venter på eksplisitt brukerbekreftelse før - `teecup_api`/`teecup_frontend` bygges/restartes mot ekte miljø. + **Rullet ut** samme økt, bruker bekreftet eksplisitt ("Ja") — begge + containere bygget/restartet rent, verifisert live på `teecup.golf` + uten konsollfeil. + +59. **Designrunden: full clubhouse-overtagelse (lys + mørk) — 2026-08-10, + se ADR-052.** Bruker ba om "designrunden" og valgte, via + `AskUserQuestion`, det bredeste av tre foreslåtte omfang: "Full + overtagelse, alt på én gang" — resten av appen (unntatt + ny-runde-veiviserens `nr-*`-palett) skulle over på "clubhouse"- + paletten i én samlet runde, ikke gradvis skjerm for skjerm som + tidligere planlagt. + + **Root cause / tilnærming:** tre paletter levde side om side — + "Forest Green" (shadcn-tokens, ~90 filer), "clubhouse" (7 filer: + innlogging/dashbord/bunnnav/velkommen), "nr-*" (ny-runde-veiviseren, + utenfor omfang). En Explore-agent bekreftet at `components/ui/*` OG + de ~90 gjenværende filene er RENE token-konsumenter (null hardkodet + hex funnet noe sted utenfor de 7 clubhouse-filene) — konsekvensen: + hele overtagelsen kunne gjøres ved å redefinere shadcn-tokenene i + `frontend/app/globals.css` (`:root`/`.dark`/media-blokk) til + clubhouse sine faktiske verdier, i stedet for å endre className i 90 + filer. `--destructive`/`--brand-orange`/`--info`/`--gold`/ + `--chart-1..6` bevisst UENDRET (egne semantiske signalfarger, ikke + del av identiteten paletten styrer). + + **Kontrast-korreksjon funnet FØR utrulling:** `--primary-foreground` + måtte endres fra nesten-svart til hvit — clubhouse sin + `--tee-strong` (`#2f6b1e`) er en MØRK grønn (brukes allerede med + `text-white` i `velkommen.tsx`), ulikt den gamle LYSE primærgrønnen. + + **Mørk variant designet av V0 på bestilling** (ingen fantes fra før — + clubhouse var "fast lys-modus"). Claude skrev en ren fargeoppgave- + prompt (ti låste lyse verdier som fasit, eksplisitt WCAG AA-krav), + bruker limte den inn i V0 og limte svaret tilbake som en prosjekt-zip + (`globals.css`-diffen inneholdt kun ny `.dark`-blokk). Claude + verifiserte V0s egne kontrasttall uavhengig (egen WCAG-beregning) — + alle stemte eksakt: ink/bg 15.7:1, muted/bg 8.2:1, muted/card 7.2:1, + hvit/tee-strong 4.76:1. + + **Reelt funn under planlegging, sparte en unødvendig kodeendring:** + opprinnelig plan antok de 7 clubhouse-filenes hardkodede + `bg-clubhouse-*`/`bg-tee-strong`-klassenavn måtte skrives om til + generiske tokens for å følge mørk modus. Viste seg unødvendig — + siden en `.dark`/media-blokk for de RÅ `--tee`/`--cup`/ + `--clubhouse-*`-variablene ble lagt til (symmetri med + hovedremappen), arver disse 7 filene mørk modus automatisk via + CSS-variabel-cascade, uansett hvilket klassenavn de bruker. Ingen av + de 7 filene endret. + + Liten tilleggsrettelse: `app/layout.tsx`s `themeColor`-metadata + (`#8BC24A`/`#1c261d`) pekte fortsatt på gamle farger — oppdatert til + de nye bakgrunnsfargene (`#f3f6ec`/`#131a0f`). + + `DESIGN_SYSTEM.md` oppdatert til å beskrive clubhouse som selve + hovedpaletten (var tidligere "Forest Green"). + + **Scratch-verifisert** (full stack: ny scratch-DB med alle 61 + migrasjoner, `teecup_app_dr1`-rolle, hyphenert scratch-MinIO, scratch + API- og frontend-container — ekte produksjonsbuild av frontend, ikke + bare `tsc`). Data seedet via ekte API-kall (personlig bane, runde, + hullscore), ikke rå SQL. `tsc --noEmit` og produksjonsbuild begge + rene. Browserverifisert i BÅDE lys og mørk modus (Chrome DevTools + MCP, `emulate colorScheme`) på `/logg-inn`, `/velkommen`, + `/dashboard` (tom + med data), `/my-rounds/[id]` (appens største + fil, 6726 linjer, tidligere Forest Green), scorekort-tabellen (tett + datagrid), `/account` (skjematung side) — alle konsistente, god + kontrast, ingen konsollfeil utover en harmløs PWA-infomelding. + `/my-rounds/new` bekreftet visuelt uendret (ingen smitte inn i + `nr-*`). `BottomNav`s bevisst palett-nøytrale hvite flate forblir + hvit i mørk modus også — eksisterende, bevisst V0-designvalg, ikke + en regresjon. `teecup_db`s ACL bekreftet uendret før/etter, alle + scratch-ressurser ryddet opp fullstendig. + + **Rullet ut 2026-08-10**, bruker bekreftet eksplisitt ("Ja takk") — + `docker compose build teecup_frontend && docker compose up -d + teecup_frontend`, ren omstart. Bekreftet live på `teecup.golf` i ekte + nettleser i BÅDE lys og mørk modus, ingen konsollfeil utover den + harmløse PWA-infomeldingen. + +60. **Ny-runde-veiviseren retemaet til clubhouse — 2026-08-10, se + ADR-053.** Rett etter forrige punkt ba bruker om at veiviseren + (`nr-*`-paletten, bevisst holdt utenfor punkt 59 som en tredje, + uavhengig V0-palett) også skulle få det nye designet. + + Samme remap-prinsipp som punkt 59, samme fil (`globals.css`): de 16 + `--nr-*`-variablene komponentene i `components/ny-runde/*` leser + (rå `var(--nr-x)`, bekreftet null hardkodet hex noe sted) fikk nye + verdier — `--nr-bg/-surface/-surface-2/-ink/-muted/-border/-accent/ + -accent-ink` byttet til clubhouse (lys+mørk), `--nr-danger(-soft)`/ + `--nr-ok(-soft)` beholdt sin egen røde/grønne hue i lys modus + (samme prinsipp som uendret `--destructive`), men fikk NYE mørke + varianter siden `.nr` aldri hadde mørk-modus-støtte før. Fire + variabler uten direkte clubhouse-kilde (`--nr-faint`, `--nr-border- + strong`, `--nr-accent-soft`, `--nr-accent-ring`) ble avledet + (alfa-blandet) fra clubhouse sine godkjente farger, kontrastsjekket + til aldri å havne under originalens egne verdier. Ingen av de 11 + filene i `components/ny-runde/*` endret. + + **Scratch-verifisert** (eget scratch-miljø, samme fulle DB/rolle/ + MinIO/API/frontend-oppsett som punkt 59). `tsc --noEmit` rent. + Browserverifisert i BÅDE lys og mørk modus: bane-valg, "Egen + bane"-tom-tilstand (øver `--nr-faint`), og det 18-raders tette + hull-for-hull-skjemaet (par/stroke-indeks-dropdowns). Alle + konsistente, god kontrast. Tre pre-eksisterende DOM-lint-varsler + (manglende `autocomplete`/`id`-attributter i selve V0-markupen) — + uendret fra før denne CSS-only-runden, ikke forårsaket av den. + Scratch-ressurser ryddet opp fullstendig, `teecup_db`s ACL bekreftet + uendret. + + **Rullet ut 2026-08-10**, bruker bekreftet eksplisitt ("Deretter; + slett kontoen, og gjør det resterende live") — ren omstart av + `teecup_frontend`, bekreftet live på `teecup.golf` uten konsollfeil + utover den harmløse PWA-infomeldingen. + +61. **PRODUKSJONSHENDELSE: konto under 13-årsgrensen slettet — 2026-08-10.** + Bruker ba om en engangssjekk av ekte `teecup_db` (read-only SELECT, + eksplisitt bedt om av bruker) etter at 13-årsgrensen (punkt 58) gikk + live: fantes det allerede kontoer registrert med fødselsdato under + 13 år? Ett treff — "Fredrik Mathisen" (`fredrik.f.mathisen@gmail.com`), + registrert 2026-08-09 med fødselsdato SATT TIL SAMME DAG (2026-08-09, + altså 0 år) — mest sannsynlig en dato-velger som ble stående på + dagens dato i stedet for en reell fødselsdato, ikke nødvendigvis en + bekreftet mindreårig, men nøyaktig signalet regelen er bygget for å + reagere på uansett årsak. Sjekket tilknyttet data først (runder, + medlemskap, meldinger, venner) — null treff overalt, en helt tom, + ubrukt konto. + + Bruker godkjente eksplisitt både e-postteksten (norsk, forklarer + sletting og gir mulighet til å opprette ny konto med riktig + fødselsdato ved feilregistrering) og selve slettingen FØR noe ble + utført. Rekkefølge: (1) `DELETE FROM app_user WHERE id = ...` mot + ekte `teecup_db` (teeoff_admin) — bekreftet FK-kaskade ren siden + kontoen ikke hadde noen tilknyttet data i noen av de NO ACTION- + begrensede tabellene (message/round_message/round_participant/ + round_shot m.fl.), (2) e-post sendt til den registrerte adressen via + appens eksisterende `_send_sync`-mekanisme i `app/email.py` (samme + SMTP-oppsett som magic-link-utsending), kjørt som et engangsskript + inni den ekte `teecup_api`-containeren, ikke en ny permanent + funksjon (ett engangstilfelle, ingen gjenbruk planlagt ennå). + Bekreftet i etterkant: kontoen finnes ikke lenger i `app_user`. + + **Bevisst utenfor omfang:** ingen automatisert, gjentakende sjekk + for fremtidige under-13-registreringer er bygget — aldersgrensen i + `PATCH /auth/profile` (punkt 58) hindrer allerede NYE registreringer, + dette var en engangsopprydding av kontoer fra FØR den regelen gikk + live. Et automatisert varsel/rutine for dette kan vurderes som egen, + fremtidig sak om det blir aktuelt. diff --git a/DESIGN_SYSTEM.md b/DESIGN_SYSTEM.md index 8f80450..1826f3c 100644 --- a/DESIGN_SYSTEM.md +++ b/DESIGN_SYSTEM.md @@ -15,62 +15,62 @@ > avhengig av finmotorikk/skarpt syn. Enhver visuell beslutning under > veies mot dette først. > -> **2026-07-29:** dette dokumentet ble revidert og formalisert basert på -> "alternativ designinstruks.md" (brukerens eget forslag, forsøkt først på -> dashbordet, deretter godkjent som ny fasit). Innholdet under ER derfor nå -> den gjeldende regelen — men er ikke nødvendigvis rullet ut på ALLE -> skjermer ennå (se `CHANGELOG.md` for hvor langt konsistens-sjekken har -> kommet). Rett opportunistisk opp eldre skjermer mot dette dokumentet når -> de likevel røres, samme mønster som tilgjengelighetsregelen over. +> **2026-08-10 (ADR-052):** paletten under er "clubhouse" — resultatet av +> en full overtagelse denne dagen. Frem til da var dette dokumentet +> "Forest Green" (nøytral grå + lys grønn primær, opprinnelig formalisert +> 2026-07-29). Clubhouse oppsto som en isolert `/logg-inn`-utforskning +> 2026-08-07 (ADR-047), ble utvidet til dashbord/bunnnav/velkommen, og +> tok til slutt over shadcn-tokenene i `globals.css` for HELE appen +> (unntatt ny-runde-veiviserens egen `nr-*`-palett, ADR-048 — den er +> bevisst en tredje, frittstående palett og beskrives ikke her). Innholdet +> under er derfor nå den faktiske koden, ikke et forslag. ## Merkevare-opprinnelse Fargeformen/-tonen er hentet fra Teeoff-logoen (samme merkevarefamilie, -egne farger — se ADR-009/ADR-016), IKKE navn eller logo. Basisfargene ble -regnet ut som presise OKLCH-verdier fra de opprinnelige hex-fargene: +egne farger — se ADR-009/ADR-016), IKKE navn eller logo. "Clubhouse" +(ADR-047/052) er en nyere, varmere fortolkning av den samme opprinnelsen, +tegnet fra selve TeeCup-logoen: -- Grønn (primær): `#8bc24a` -- Oransje (sekundær/"brand-orange"): `#ff5722` +- Grønn ("tee" / "tee-strong"): `#8bbd51` / `#2f6b1e` +- Oransjerød ("cup" / "cup-strong"): `#ff5427` / `#cf3c17` -Disse to er de ENESTE to kjernefargene i merkevaren. Et forslag om en -tredje ("informasjons"-)farge ble vurdert 2026-07-25 og IKKE besluttet — -se FEATURE_BACKLOG.md. Anbefalingen der var å gjenbruke `--chart-3` -(allerede en blåtone i statistikk-skalaen) fremfor å finne på noe nytt. +`brand-orange` (den eldre, separate sekundærtokenen, `#ff5722`) lever +videre uendret — den er allerede nesten identisk med `cup`, samme +merkevarefamilie, ingen dissonans. Personlighet: "klubbhus-stemning, ikke +countryklubb-snobberi" — varm, jordnær, vennlig. ## Fargetoken (`frontend/app/globals.css`) -Alle farger er definert som OKLCH-variabler, med egne verdier for lys og -mørk modus (`:root` / `.dark` / `@media (prefers-color-scheme: dark)`, -alle tre holdt i synk). Bruk ALLTID token-navnene under (Tailwind-klasser -som `bg-primary`, `text-muted-foreground` osv.) — aldri rå hex/oklch, og -ALDRI hardkodede Tailwind-fargeklasser som `slate-500`/`gray-100` i ny -kode. Dette er ikke bare en stilregel: hardkodede farger bryter den -automatiske mørk/lys-tema-logikken (se "Lyst og mørkt tema" under), som -ellers virker helt av seg selv så lenge token-klassene brukes. +Kildepaletten er ti hex-verdier (`--tee`, `--tee-strong`, `--cup`, +`--cup-strong`, `--clubhouse-bg`, `--clubhouse-card`, `--clubhouse-ink`, +`--clubhouse-muted`, `--clubhouse-border`, `--clubhouse-field`), definert +i egne `:root`/`.dark`/`@media`-blokker i `globals.css`. shadcn-tokenene +(`--background`, `--card`, `--primary` osv.) KOPIERER disse verdiene +direkte, slik at Tailwind-klassene under (`bg-primary`, +`text-muted-foreground` osv.) er de du skal bruke i vanlig kode — aldri +rå hex/oklch, og ALDRI hardkodede Tailwind-fargeklasser som +`slate-500`/`gray-100`. Hardkodede farger bryter den automatiske mørk/ +lys-tema-logikken, som ellers virker helt av seg selv så lenge +token-klassene brukes. -| Token | Lys modus | Rolle | -|---|---|---| -| `background` / `foreground` | ren hvit (identisk med `card`) / mørk grå | sideflate / brødtekst | -| `card` / `card-foreground` | hvit / mørk grå | kort, paneler, seksjoner | -| `primary` / `primary-foreground` | `oklch(0.7512 0.1613 130.33)` (grønn) / mørk | hovedhandling, valgt tilstand, "under par"/positiv | -| `secondary` / `secondary-foreground` | lys grå | sekundær vekt, sjeldent brukt alene | -| `muted` / `muted-foreground` | lys grå / dempet | bakgrunnstoner, sekundær tekst/bildetekst | -| `accent` / `accent-foreground` | lys grå | hover-tilstand på nøytrale flater | -| `destructive` | rød-oransje | slett/fare-handlinger | -| `border` / `input` | lys grå | kant på kort, felt, delelinjer | -| `ring` | samme som `primary` | fokus-ring (tastatur-tilgjengelighet) | -| `brand-orange` / `brand-orange-foreground` | `oklch(0.6792 0.2128 36.53)` | sekundærfarge — "over par"/advarsel, IKKE feil (det er `destructive`) | -| `chart-1` … `chart-6` | grønn→blå→gul→oransje→rød-skala | statistikk-/fordelingsvisualiseringer (ADR-033), ALDRI brukt for kategoriske UI-tilstander | +| Token | Lys modus | Mørk modus | Rolle | +|---|---|---|---| +| `background` / `foreground` | `#f3f6ec` / `#17200f` | `#131a0f` / `#eef3e6` | sideflate / brødtekst | +| `card` / `card-foreground` | `#ffffff` / `#17200f` | `#1d2616` / `#eef3e6` | kort, paneler, seksjoner | +| `primary` / `primary-foreground` | `#2f6b1e` / hvit | `#3c8226` / hvit | hovedhandling, valgt tilstand, "under par"/positiv | +| `secondary`/`muted`/`accent` (+ `-foreground`) | `#f7f9f3` / `#17200f` | `#26301d` / `#eef3e6` | bakgrunnstoner, hover, sekundær tekst | +| `destructive` | rød-oransje (uendret fra Forest Green) | uendret | slett/fare-handlinger | +| `border` / `input` | `#dbe1cd` | `#34402a` | kant på kort, felt, delelinjer | +| `ring` | samme som `primary` | samme som `primary` | fokus-ring (tastatur-tilgjengelighet) | +| `brand-orange` / `brand-orange-foreground` | `oklch(0.6792 0.2128 36.53)` (uendret) | uendret | sekundærfarge — "over par"/advarsel, IKKE feil (det er `destructive`) | +| `chart-1` … `chart-6` | grønn→blå→gul→oransje→rød-skala (uendret) | uendret | statistikk-/fordelingsvisualiseringer (ADR-033), ALDRI brukt for kategoriske UI-tilstander | -**2026-08-02:** alle nøytrale tokens (`background`/`muted`/`accent`/ -`border`/`secondary` m.fl.) hadde tidligere en svak grønn hue (130-145) -iblandet selv når de skulle være "nøytral grå" — dette ga et vedvarende, -utilsiktet grønt skjær på nesten hver bakgrunn, hover-tilstand og kant i -hele appen (brukeren opplevde appen som "stuck i det lysegrønne -utseendet"). Rettet til ekte nøytral grå (`chroma 0`) på tvers av lys/ -mørk/media-query-blokkene. `primary` er UENDRET og fortsatt den eneste -tokenen som skal lese som grønn — reservert til valgt/aktiv tilstand og -primærhandling, se semantikk-listen under. +**Hvorfor destructive/brand-orange/info/gold/chart er uendret (ADR-052):** +disse er bevisst distinkte semantiske signalfarger, ikke del av +nøytral/primær-identiteten paletten styrer — å tvinge dem inn i clubhouse +sin fargefamilie ville visket ut skillet mellom "dette er merkevaren" og +"dette er et signal (feil/advarsel/rekord/statistikk)". **Farge-semantikk, konsekvent på tvers av hele appen:** - `primary` (grønn) = valgt/aktiv, positivt resultat (under par, ledende, diff --git a/frontend/app/globals.css b/frontend/app/globals.css index 7c89034..3888730 100644 --- a/frontend/app/globals.css +++ b/frontend/app/globals.css @@ -55,31 +55,34 @@ :root { color-scheme: light; - /* Nøytrale flater er EKTE nøytral grå (chroma 0) -- før 2026-08-02 hadde - disse en svak grønn hue (130-145) iblandet, som ga et vedvarende - grønt skjær på nesten hver bakgrunn/hover/kant i hele appen. `primary` - er fortsatt den bevisste, mettede merkevare-grønnen -- kun den skal - lese som grønn. `--background` er ren hvit (0.985 var fortsatt en - synlig off-white, ikke "fjernet") -- identisk med `--card`, kort - skilles fra siden via border/shadow, ikke en bakgrunnsfarge-forskjell. */ - --background: oklch(1 0 0); - --foreground: oklch(0.24 0 0); - --card: oklch(1 0 0); - --card-foreground: oklch(0.24 0 0); - --popover: oklch(1 0 0); - --popover-foreground: oklch(0.24 0 0); - --primary: oklch(0.7512 0.1613 130.33); - --primary-foreground: oklch(0.22 0 0); - --secondary: oklch(0.96 0 0); - --secondary-foreground: oklch(0.3 0 0); - --muted: oklch(0.96 0 0); - --muted-foreground: oklch(0.52 0 0); - --accent: oklch(0.94 0 0); - --accent-foreground: oklch(0.3 0 0); + /* Full clubhouse-overtagelse (ADR-052, 2026-08-10) -- disse + shadcn-tokenene pekte tidligere på "Forest Green" (nøytral grå + + lys grønn primary). De peker nå på clubhouse-paletten (definert + lenger ned i denne filen, --tee-strong/--clubhouse-*) -- samme + verdier, kopiert inn her slik at bg-primary/bg-card/ + text-muted-foreground osv. arver clubhouse over HELE appen uten at + noen av de ~90 filene som bruker disse klassenavnene trenger å + endres. Se ARCHITECTURE_DECISIONS.md ADR-052 for full begrunnelse, + inkludert hvorfor destructive/brand-orange/info/gold/chart-1..6 + bevisst IKKE er endret her. */ + --background: #f3f6ec; + --foreground: #17200f; + --card: #ffffff; + --card-foreground: #17200f; + --popover: #ffffff; + --popover-foreground: #17200f; + --primary: #2f6b1e; + --primary-foreground: #ffffff; + --secondary: #f7f9f3; + --secondary-foreground: #17200f; + --muted: #f7f9f3; + --muted-foreground: #515b45; + --accent: #f7f9f3; + --accent-foreground: #17200f; --destructive: oklch(0.577 0.245 27.325); - --border: oklch(0.9 0 0); - --input: oklch(0.9 0 0); - --ring: oklch(0.7512 0.1613 130.33); + --border: #dbe1cd; + --input: #dbe1cd; + --ring: #2f6b1e; --brand-orange: oklch(0.6792 0.2128 36.53); --brand-orange-foreground: oklch(0.99 0 0); /* Løftet fra chart-3/chart-4 (2026-07-28, se DESIGN_SYSTEM.md) -- egne @@ -111,24 +114,31 @@ .dark { color-scheme: dark; - --background: oklch(0.19 0 0); - --foreground: oklch(0.96 0 0); - --card: oklch(0.24 0 0); - --card-foreground: oklch(0.96 0 0); - --popover: oklch(0.24 0 0); - --popover-foreground: oklch(0.96 0 0); - --primary: oklch(0.7512 0.1613 130.33); - --primary-foreground: oklch(0.2 0 0); - --secondary: oklch(0.28 0 0); - --secondary-foreground: oklch(0.96 0 0); - --muted: oklch(0.28 0 0); - --muted-foreground: oklch(0.7 0 0); - --accent: oklch(0.32 0 0); - --accent-foreground: oklch(0.96 0 0); + /* Mørk clubhouse-variant, ADR-052 -- fargeverdier designet av V0 på + bestilling (samme oppgave-/rolledeling som resten av clubhouse), + låst referanse: --tee/--tee-strong/--cup/--cup-strong/ + --clubhouse-* i den mørke blokken lenger ned i filen. AA-verifisert + av Claude (egen kontrastberegning, ikke bare V0s egne påstander): + ink/bg 15.7:1, muted/bg 8.2:1, muted/card 7.2:1, hvit/tee-strong + 4.76:1. */ + --background: #131a0f; + --foreground: #eef3e6; + --card: #1d2616; + --card-foreground: #eef3e6; + --popover: #1d2616; + --popover-foreground: #eef3e6; + --primary: #3c8226; + --primary-foreground: #ffffff; + --secondary: #26301d; + --secondary-foreground: #eef3e6; + --muted: #26301d; + --muted-foreground: #a7b598; + --accent: #26301d; + --accent-foreground: #eef3e6; --destructive: oklch(0.704 0.191 22.216); - --border: oklch(1 0 0 / 12%); - --input: oklch(1 0 0 / 16%); - --ring: oklch(0.7512 0.1613 130.33); + --border: #34402a; + --input: #34402a; + --ring: #3c8226; --brand-orange: oklch(0.6792 0.2128 36.53); --brand-orange-foreground: oklch(0.16 0.02 40); --info: oklch(0.75 0.13 210); @@ -155,24 +165,25 @@ @media (prefers-color-scheme: dark) { :root:not(.light) { color-scheme: dark; - --background: oklch(0.19 0 0); - --foreground: oklch(0.96 0 0); - --card: oklch(0.24 0 0); - --card-foreground: oklch(0.96 0 0); - --popover: oklch(0.24 0 0); - --popover-foreground: oklch(0.96 0 0); - --primary: oklch(0.7512 0.1613 130.33); - --primary-foreground: oklch(0.2 0 0); - --secondary: oklch(0.28 0 0); - --secondary-foreground: oklch(0.96 0 0); - --muted: oklch(0.28 0 0); - --muted-foreground: oklch(0.7 0 0); - --accent: oklch(0.32 0 0); - --accent-foreground: oklch(0.96 0 0); + /* Speiler .dark-blokken over -- se kommentar der (ADR-052). */ + --background: #131a0f; + --foreground: #eef3e6; + --card: #1d2616; + --card-foreground: #eef3e6; + --popover: #1d2616; + --popover-foreground: #eef3e6; + --primary: #3c8226; + --primary-foreground: #ffffff; + --secondary: #26301d; + --secondary-foreground: #eef3e6; + --muted: #26301d; + --muted-foreground: #a7b598; + --accent: #26301d; + --accent-foreground: #eef3e6; --destructive: oklch(0.704 0.191 22.216); - --border: oklch(1 0 0 / 12%); - --input: oklch(1 0 0 / 16%); - --ring: oklch(0.7512 0.1613 130.33); + --border: #34402a; + --input: #34402a; + --ring: #3c8226; --brand-orange: oklch(0.6792 0.2128 36.53); --brand-orange-foreground: oklch(0.16 0.02 40); --info: oklch(0.75 0.13 210); @@ -206,11 +217,11 @@ } /* ------------------------------------------------------------------ */ -/* /logg-inn -- parallell V0-utforskning (ADR-047-oppfølging, 2026-08-07) */ -/* Egen, skopet "clubhouse"-palett KUN brukt av components/teecup/* -- */ -/* additiv, rører ikke tokens over. Fast lys-modus (leser likt uansett */ -/* systemtema), siden dette er en isolert sammenligningsside, ikke en */ -/* endring av appens faktiske tema. */ +/* Clubhouse-paletten -- opprinnelig fra /logg-inn-utforskningen */ +/* (ADR-047-oppfølging, 2026-08-07), nå selve kildepaletten for HELE */ +/* appen (ADR-052, 2026-08-10). Tokens over (--background/--primary/ */ +/* osv.) kopierer disse verdiene direkte. Mørk variant lagt til her */ +/* under, designet av V0 på bestilling -- se ADR-052. */ /* ------------------------------------------------------------------ */ :root { --tee: #8bbd51; @@ -225,6 +236,36 @@ --clubhouse-field: #f7f9f3; } +/* Mørk clubhouse-variant -- samme kilde/AA-verifisering som .dark- + blokken over. */ +.dark { + --tee: #a3d165; + --tee-strong: #3c8226; + --cup: #ff6a3d; + --cup-strong: #ff8355; + --clubhouse-bg: #131a0f; + --clubhouse-card: #1d2616; + --clubhouse-ink: #eef3e6; + --clubhouse-muted: #a7b598; + --clubhouse-border: #34402a; + --clubhouse-field: #26301d; +} + +@media (prefers-color-scheme: dark) { + :root:not(.light) { + --tee: #a3d165; + --tee-strong: #3c8226; + --cup: #ff6a3d; + --cup-strong: #ff8355; + --clubhouse-bg: #131a0f; + --clubhouse-card: #1d2616; + --clubhouse-ink: #eef3e6; + --clubhouse-muted: #a7b598; + --clubhouse-border: #34402a; + --clubhouse-field: #26301d; + } +} + @theme inline { --color-tee: var(--tee); --color-tee-strong: var(--tee-strong); @@ -239,32 +280,77 @@ } /* ------------------------------------------------------------------ */ -/* /my-rounds/new -- egen V0-utforskning (2026-08-08), sendt som en */ -/* rendyrket TEKNISK spesifikasjon uten noen visuell føring -- V0 fikk */ -/* fritt spillerom og valgte en tredje, egen palett (kald blå/grå), */ -/* uavhengig av både "Forest Green" og "clubhouse". Skopet KUN til */ -/* components/ny-runde/* via arbitrary-value var()-referanser */ -/* (bg-[var(--nr-x)]), ikke via @theme inline -- rører derfor ingen */ -/* andre tokens/sider. Eksporten refererte `font-display`/Bricolage -- */ -/* bevisst IKKE tatt med her (samme utelatelse som clubhouse-runden), */ -/* for å unngå en tredje font-avhengighet for én skjerm; ingen av */ -/* filene under bruker faktisk `font-display` etter integrering. */ +/* /my-rounds/new -- opprinnelig en egen V0-utforskning (2026-08-08, */ +/* kald blå/grå, uavhengig av "Forest Green"). Retemaet til clubhouse */ +/* 2026-08-10 (ADR-053, samme økt som ADR-052-hovedovertagelsen) -- */ +/* bruker ba eksplisitt om at veiviseren også skulle få "det nye */ +/* designet". Samme remap-prinsipp som ADR-052: disse 16 --nr-*- */ +/* variablene er den ENESTE kilden komponentene i components/ny-runde/* */ +/* leser (via `var(--nr-x)`, ikke `@theme inline`) -- kun VERDIENE */ +/* under er endret, ingen av de 11 filene er rørt. `--nr-danger(-soft)`/*/ +/* `--nr-ok(-soft)` beholder sin opprinnelige, distinkte rød/grønn-hue */ +/* (samme prinsipp som `--destructive` i hovedpaletten, ADR-052) -- */ +/* kun bakgrunn/kant/aksent er byttet til clubhouse. `--nr-faint`/ */ +/* `--nr-border-strong`/`--nr-accent-soft`/`--nr-accent-ring` har ingen */ +/* direkte clubhouse-kilde og er avledet (alfa-blandet) fra clubhouse */ +/* sine etablerte farger, kontrastsjekket mot originalens egne */ +/* verdier (aldri under dem) -- ikke fritt oppfunnet. */ /* ------------------------------------------------------------------ */ :root { - --nr-bg: #e9edf2; + --nr-bg: #f3f6ec; --nr-surface: #ffffff; - --nr-surface-2: #f4f6f9; - --nr-ink: #171b21; - --nr-muted: #59616d; - --nr-faint: #8b94a1; - --nr-border: #d5dae1; - --nr-border-strong: #b9c1cc; - --nr-accent: #1f5fd6; + --nr-surface-2: #f7f9f3; + --nr-ink: #17200f; + --nr-muted: #515b45; + --nr-faint: #828a77; + --nr-border: #dbe1cd; + --nr-border-strong: #969d8a; + --nr-accent: #2f6b1e; --nr-accent-ink: #ffffff; - --nr-accent-soft: #e6eefc; - --nr-accent-ring: #9fbdf3; + --nr-accent-soft: #e4eed6; + --nr-accent-ring: #9bb78f; --nr-danger: #b42318; --nr-danger-soft: #fdeceb; --nr-ok: #1f7a44; --nr-ok-soft: #e6f4ec; } + +.dark { + --nr-bg: #131a0f; + --nr-surface: #1d2616; + --nr-surface-2: #26301d; + --nr-ink: #eef3e6; + --nr-muted: #a7b598; + --nr-faint: #7b866f; + --nr-border: #34402a; + --nr-border-strong: #757f6c; + --nr-accent: #3c8226; + --nr-accent-ink: #ffffff; + --nr-accent-soft: #2d3b1e; + --nr-accent-ring: #2a531c; + --nr-danger: #ca655d; + --nr-danger-soft: #382516; + --nr-ok: #6da985; + --nr-ok-soft: #1d371f; +} + +@media (prefers-color-scheme: dark) { + :root:not(.light) { + --nr-bg: #131a0f; + --nr-surface: #1d2616; + --nr-surface-2: #26301d; + --nr-ink: #eef3e6; + --nr-muted: #a7b598; + --nr-faint: #7b866f; + --nr-border: #34402a; + --nr-border-strong: #757f6c; + --nr-accent: #3c8226; + --nr-accent-ink: #ffffff; + --nr-accent-soft: #2d3b1e; + --nr-accent-ring: #2a531c; + --nr-danger: #ca655d; + --nr-danger-soft: #382516; + --nr-ok: #6da985; + --nr-ok-soft: #1d371f; + } +} diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx index f311a26..ef71ee8 100644 --- a/frontend/app/layout.tsx +++ b/frontend/app/layout.tsx @@ -47,8 +47,8 @@ export const metadata: Metadata = { export const viewport: Viewport = { colorScheme: 'light dark', themeColor: [ - { media: '(prefers-color-scheme: light)', color: '#8BC24A' }, - { media: '(prefers-color-scheme: dark)', color: '#1c261d' }, + { media: '(prefers-color-scheme: light)', color: '#f3f6ec' }, + { media: '(prefers-color-scheme: dark)', color: '#131a0f' }, ], }