Erol Haagenrud
8ef2f61f4d
Dashbordets egne JSX re-stylet til --clubhouse-*/--tee*/--cup*-tokens (V0, egen parallell utforskning ved siden av Forest Green) -- delte komponenter som RoundCard/TournamentCard urørt. Den gamle, lokale BottomTabBar erstattet med components/teecup/bottom-nav.tsx (egen V0-prompt, usePathname()-drevet aktiv-fane), koblet inn på alle syv sider som viser den. To reelle bugs funnet og rettet under scratch-verifisering: aktiv-fane-sammenligning som feilaktig strippet #hash (ga to samtidig aktive faner), og manglende fane-gruppering for my-friends/my-feed/my-notifications (løst med en matchPaths-mekanisme). Se CHANGELOG.md punkt 39-40 for full verifiseringsdetalj.
270 lines
10 KiB
CSS
270 lines
10 KiB
CSS
@import 'tailwindcss';
|
|
@import 'tw-animate-css';
|
|
@import 'shadcn/tailwind.css';
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
@theme inline {
|
|
--font-sans: var(--font-nunito), ui-sans-serif, system-ui, sans-serif;
|
|
--color-sidebar-ring: var(--sidebar-ring);
|
|
--color-sidebar-border: var(--sidebar-border);
|
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
--color-sidebar-accent: var(--sidebar-accent);
|
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
--color-sidebar-primary: var(--sidebar-primary);
|
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
--color-sidebar: var(--sidebar);
|
|
--color-chart-6: var(--chart-6);
|
|
--color-chart-5: var(--chart-5);
|
|
--color-chart-4: var(--chart-4);
|
|
--color-chart-3: var(--chart-3);
|
|
--color-chart-2: var(--chart-2);
|
|
--color-chart-1: var(--chart-1);
|
|
--color-ring: var(--ring);
|
|
--color-input: var(--input);
|
|
--color-border: var(--border);
|
|
--color-destructive: var(--destructive);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
--color-accent: var(--accent);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-muted: var(--muted);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
--color-secondary: var(--secondary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-primary: var(--primary);
|
|
--color-popover-foreground: var(--popover-foreground);
|
|
--color-popover: var(--popover);
|
|
--color-card-foreground: var(--card-foreground);
|
|
--color-card: var(--card);
|
|
--color-foreground: var(--foreground);
|
|
--color-background: var(--background);
|
|
--color-brand-orange: var(--brand-orange);
|
|
--color-brand-orange-foreground: var(--brand-orange-foreground);
|
|
--color-info: var(--info);
|
|
--color-info-foreground: var(--info-foreground);
|
|
--color-gold: var(--gold);
|
|
--color-gold-foreground: var(--gold-foreground);
|
|
--radius-sm: calc(var(--radius) * 0.6);
|
|
--radius-md: calc(var(--radius) * 0.8);
|
|
--radius-lg: var(--radius);
|
|
--radius-xl: calc(var(--radius) * 1.4);
|
|
--radius-2xl: calc(var(--radius) * 1.8);
|
|
--radius-3xl: calc(var(--radius) * 2.2);
|
|
--radius-4xl: calc(var(--radius) * 2.6);
|
|
}
|
|
|
|
: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);
|
|
--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);
|
|
--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
|
|
kjernetoken for nøytral informasjon (--info) og personlig-rekord/
|
|
merkeverdig-prestasjon (--gold), samme validerte OKLCH-verdier som
|
|
statistikk-skalaen bruker allerede. */
|
|
--info: oklch(0.68 0.13 210);
|
|
--info-foreground: oklch(0.99 0 0);
|
|
--gold: oklch(0.79 0.15 85);
|
|
--gold-foreground: oklch(0.22 0.04 85);
|
|
/* Statistikk-fargeskala (rundestatistikk, ADR-033) -- brukt sammen med
|
|
tekst-/tall-etiketter, aldri farge alene som eneste signal. */
|
|
--chart-1: oklch(0.55 0.15 160);
|
|
--chart-2: oklch(0.72 0.17 140);
|
|
--chart-3: oklch(0.68 0.13 210);
|
|
--chart-4: oklch(0.79 0.15 85);
|
|
--chart-5: oklch(0.68 0.2 45);
|
|
--chart-6: oklch(0.57 0.22 25);
|
|
--radius: 0.625rem;
|
|
--sidebar: oklch(0.985 0 0);
|
|
--sidebar-foreground: oklch(0.145 0 0);
|
|
--sidebar-primary: oklch(0.205 0 0);
|
|
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
--sidebar-accent: oklch(0.97 0 0);
|
|
--sidebar-accent-foreground: oklch(0.205 0 0);
|
|
--sidebar-border: oklch(0.922 0 0);
|
|
--sidebar-ring: oklch(0.708 0 0);
|
|
}
|
|
|
|
.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);
|
|
--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);
|
|
--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);
|
|
--info-foreground: oklch(0.16 0.02 210);
|
|
--gold: oklch(0.83 0.14 85);
|
|
--gold-foreground: oklch(0.18 0.03 85);
|
|
/* Statistikk-fargeskala, løftet for kontrast på mørk bakgrunn. */
|
|
--chart-1: oklch(0.7 0.16 160);
|
|
--chart-2: oklch(0.79 0.17 140);
|
|
--chart-3: oklch(0.75 0.13 210);
|
|
--chart-4: oklch(0.83 0.14 85);
|
|
--chart-5: oklch(0.73 0.19 45);
|
|
--chart-6: oklch(0.66 0.21 25);
|
|
--sidebar: oklch(0.205 0 0);
|
|
--sidebar-foreground: oklch(0.985 0 0);
|
|
--sidebar-primary: oklch(0.488 0.243 264.376);
|
|
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
--sidebar-accent: oklch(0.269 0 0);
|
|
--sidebar-accent-foreground: oklch(0.985 0 0);
|
|
--sidebar-border: oklch(1 0 0 / 10%);
|
|
--sidebar-ring: oklch(0.556 0 0);
|
|
}
|
|
|
|
@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);
|
|
--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);
|
|
--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);
|
|
--info-foreground: oklch(0.16 0.02 210);
|
|
--gold: oklch(0.83 0.14 85);
|
|
--gold-foreground: oklch(0.18 0.03 85);
|
|
--chart-1: oklch(0.7 0.16 160);
|
|
--chart-2: oklch(0.79 0.17 140);
|
|
--chart-3: oklch(0.75 0.13 210);
|
|
--chart-4: oklch(0.83 0.14 85);
|
|
--chart-5: oklch(0.73 0.19 45);
|
|
--chart-6: oklch(0.66 0.21 25);
|
|
--sidebar: oklch(0.205 0 0);
|
|
--sidebar-foreground: oklch(0.985 0 0);
|
|
--sidebar-primary: oklch(0.488 0.243 264.376);
|
|
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
--sidebar-accent: oklch(0.269 0 0);
|
|
--sidebar-accent-foreground: oklch(0.985 0 0);
|
|
--sidebar-border: oklch(1 0 0 / 10%);
|
|
--sidebar-ring: oklch(0.556 0 0);
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border outline-ring/50;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
}
|
|
}
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* /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. */
|
|
/* ------------------------------------------------------------------ */
|
|
:root {
|
|
--tee: #8bbd51;
|
|
--tee-strong: #2f6b1e;
|
|
--cup: #ff5427;
|
|
--cup-strong: #cf3c17;
|
|
--clubhouse-bg: #f3f6ec;
|
|
--clubhouse-card: #ffffff;
|
|
--clubhouse-ink: #17200f;
|
|
--clubhouse-muted: #515b45;
|
|
--clubhouse-border: #dbe1cd;
|
|
--clubhouse-field: #f7f9f3;
|
|
}
|
|
|
|
@theme inline {
|
|
--color-tee: var(--tee);
|
|
--color-tee-strong: var(--tee-strong);
|
|
--color-cup: var(--cup);
|
|
--color-cup-strong: var(--cup-strong);
|
|
--color-clubhouse-bg: var(--clubhouse-bg);
|
|
--color-clubhouse-card: var(--clubhouse-card);
|
|
--color-clubhouse-ink: var(--clubhouse-ink);
|
|
--color-clubhouse-muted: var(--clubhouse-muted);
|
|
--color-clubhouse-border: var(--clubhouse-border);
|
|
--color-clubhouse-field: var(--clubhouse-field);
|
|
}
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* /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. */
|
|
/* ------------------------------------------------------------------ */
|
|
:root {
|
|
--nr-bg: #e9edf2;
|
|
--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-accent-ink: #ffffff;
|
|
--nr-accent-soft: #e6eefc;
|
|
--nr-accent-ring: #9fbdf3;
|
|
--nr-danger: #b42318;
|
|
--nr-danger-soft: #fdeceb;
|
|
--nr-ok: #1f7a44;
|
|
--nr-ok-soft: #e6f4ec;
|
|
}
|