117 lines
5.5 KiB
Markdown
117 lines
5.5 KiB
Markdown
# Alternativ designinstruks — PROMOTERT til DESIGN_SYSTEM.md (2026-07-29)
|
||
|
||
**Status: AVSLUTTET/ARKIVERT.** Forsøket på dashbordet ble godkjent samme
|
||
dag ("det ser bra ut") — innholdet under er nå slått sammen inn i
|
||
`DESIGN_SYSTEM.md` (som fortsatt er DEN autoritative kilden, sammen med
|
||
CLAUDE.md sin ufravikelige tilgjengelighetsregel). Denne filen beholdes
|
||
kun som historisk referanse for selve forslaget slik det opprinnelig ble
|
||
formulert — les `DESIGN_SYSTEM.md` for gjeldende regelverk, ikke denne.
|
||
|
||
## De nye instruksene (shadcn-basert, klar til bruk i prompter)
|
||
|
||
### 1. Fargesystem og Design Tokens (Shadcn-basert)
|
||
|
||
- **Bruk eksisterende CSS-variabler:** systemet bygger allerede på
|
||
semantiske variabler (`bg-background`, `text-foreground`, `bg-card`,
|
||
`border-border`, `text-muted-foreground`). Aldri hardkod
|
||
Tailwind-farger som `slate-500`/`gray-100` — det bryter den
|
||
eksisterende mørk/lys-tema-logikken.
|
||
- **Merkevarefarger:** Grønn (primær) — hovedhandling, valgt tilstand,
|
||
positivt (f.eks. HCP-nedgang). Oransje (sekundær/kontrast) — merkevarens
|
||
andre pol, brukes til oppmerksomhet/motsetninger (over par,
|
||
motstanderlag, "ventende"-indikator). **Oransje er IKKE en advarsel-
|
||
eller feilfarge.**
|
||
- **Feil/advarsler:** faktiske feil (sletting/fare) bruker `destructive`
|
||
(rød).
|
||
|
||
### 2. Typografi og lesbarhet (designet for "uten lesebriller")
|
||
|
||
- Standard brødtekst er `text-base` (16px). Ved denne størrelsen og med
|
||
god kontrast (f.eks. `text-foreground`) er `font-normal` helt
|
||
akseptabelt og foretrukket, for å unngå visuell støy. Mindre tekst
|
||
(`text-sm`) brukes kun til metadata, og bør da ofte gis `font-medium`
|
||
for å kompensere for størrelsen.
|
||
- `tabular-nums` konsekvent på all numerisk visning (HCP, score, datoer).
|
||
- Signerte tall (HCP-trend, score mot par) bruker ekte minustegn (−),
|
||
aldri bindestrek (-).
|
||
|
||
### 3. Layout, avstander og "grid"
|
||
|
||
- **8-punkts rutenett:** alle marger, avstander (`gap`) og padding følger
|
||
multipler av 8 (`p-2`, `p-4`, `p-6` osv.).
|
||
- **Trykkflater:** absolutt ufravikelig krav om minimum 44×44px for enhver
|
||
interaktiv flate.
|
||
- **Kort og beholder:** `rounded-2xl`, `border border-border`, `bg-card`,
|
||
svak skygge (`shadow-sm`) i lyst tema. Tomtilstander kan bruke
|
||
`border-dashed`.
|
||
|
||
### 4. Interaksjon og navigasjon
|
||
|
||
- Alle interaktive elementer må ha tydelige tilstander for `:hover` og
|
||
`:active` — umiddelbar, taktil bekreftelse på at trykket er registrert.
|
||
- Deaktivert tilstand: `opacity-50` og `pointer-events-none`.
|
||
- `lucide-react`. Viktige handlinger skal alltid ha en tekstlabel ved
|
||
siden av ikonet. Rene ikon-knapper tillates kun for universelt
|
||
forståtte symboler (tannhjul, lukkekryss, varselbjelle) og MÅ da ha en
|
||
beskrivende `aria-label`.
|
||
|
||
### 5. Lyst og mørkt tema
|
||
|
||
- Tema styres automatisk av shadcn-variablene (punkt 1) — ingen egen
|
||
logikk trengs per skjerm.
|
||
- Dybde i mørkt tema skapes automatisk av at `bg-card` er marginalt
|
||
lysere enn `bg-background`, adskilt med `border-border`.
|
||
- Kontrastnivå skal møte WCAG AA i begge oppsett (shadcn-variablene
|
||
håndterer dette ut av boksen).
|
||
|
||
### 6. Skjemaer og inndata (mobil-først UX)
|
||
|
||
- Tekst i `<input>`/`<select>`/`<textarea>` MÅ være minst `text-base`
|
||
(16px) — mindre utløser tvungen auto-zoom på iOS.
|
||
- Riktig inndatamodus: `inputMode="numeric"`/`"decimal"` der brukeren
|
||
skriver tall (HCP, antall slag).
|
||
|
||
### 7. Safe areas og skjermkanter
|
||
|
||
- Elementer festet til topp eller bunn skal ha nok ekstra padding (`pt`/
|
||
`pb`) til at ingenting havner utenfor trygg sone (Dynamic Island/
|
||
hjem-indikator).
|
||
|
||
### 8. Bevegelse og overganger (motion)
|
||
|
||
- `transition-all duration-200 ease-in-out` for state-endringer på
|
||
knapper og kort. Appen skal føles som en lynrask "native" app.
|
||
- Ingen animasjoner/fades lenger enn 300ms.
|
||
|
||
---
|
||
|
||
## Anvendelse på dashbordet (2026-07-29)
|
||
|
||
Denne versjonen er allerede forankret i det eksisterende token-systemet
|
||
(punkt 1) og retter selv opp spenningen rundt oransje (punkt 1) — begge
|
||
ting forrige runde av dette notatet måtte avvike fra. Konkret gjort denne
|
||
runden, oppå forrige rundes 8-punkts/safe-area/`:active`-arbeid:
|
||
|
||
- **Punkt 2:** `text-sm`-metadata (bane-radens "N runder · Sist …",
|
||
"Ingen nye forespørsler") satt til `font-medium`. Body-tekst ved
|
||
`text-base` (undertittel under hilsenen) var allerede `font-normal` fra
|
||
før — ingen endring nødvendig der.
|
||
- **Punkt 8:** gikk tilbake til `transition-all duration-200 ease-in-out`
|
||
overalt (forrige runde brukte målrettede `transition-[...]`-lister av
|
||
ytelseshensyn — reversert på eksplisitt instruks).
|
||
- Alt annet (tokens, ikke-hardkodet farge, 44px-trykkflater, `:active`-
|
||
tilstander, safe-area, `tabular-nums`, ekte minustegn, `text-base`
|
||
input-felt) stod allerede riktig fra forrige runde og er uendret.
|
||
|
||
**Reell bug fikset i forrige runde, fortsatt gjeldende:** "Ny turnering"/
|
||
"Bli med med kode"-knappene i turnering-tomtilstanden var koblet til
|
||
ingenting. Rettet ved å løfte hurtighandling-skjemaets åpne/lukk-tilstand
|
||
til dashbord-roten. Bekreftet på nytt i denne runden med en ekte
|
||
klikk-gjennom i nettleser (Chrome DevTools, mobilvisning 390×844):
|
||
trykk på tomtilstand-knappen åpner nå det samme skjemaet og scroller dit.
|
||
|
||
**Verifisert i nettleser denne runden (Chrome DevTools, mobil 390×844,
|
||
isolert scratch-backend, ryddet opp etterpå):** full registrering →
|
||
obligatorisk profilutfylling → dashbord, opprettelse av en turnering via
|
||
den nettopp fikserte tomtilstand-knappen, og en visuell sjekk av BÅDE lyst
|
||
og mørkt tema (automatisk kontrast/dybde, ingen egen kode nødvendig).
|