envide/teecup
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
teecup/alternativ designinstruks.md

5.5 KiB
Raw Blame History

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).