/* =========================================================== * Designtokens — delad källa för båda render-världar: * - SPA (public/js/*) via length i app/layout.tsx * - App Router (app/**) via samma layout * * Lägg ALDRIG nya råa hex-värden i style.css eller komponent- * CSS — gå via en token här. Alias-blocket längst ned håller * befintliga namn (--brand, --bg, --border, --text-muted, * --font, --white) levande så att 40 SPA-sidor inte måste * skrivas om. Pek-om snarare än byt-ut. * =========================================================== */ :root { /* Ytor & text — baspalett */ --ink: #1b2638; /* mörk skiffer — sidebar/topbar, mörka ytor, rubriker */ --ink-2: #1e4e8c; --paper: #ffffff; /* kort */ --cream: #f6f7f9; /* app-bakgrund */ --cream-2: #eef1f5; /* ikonytor / mjuk fyllning */ /* ⚠️ FACIT (docs/design/avstamning-omritning-v1.html). Var #27364a. */ --text: #1b2430; --muted: #5b6776; --line: #e5e8ee; /* Accent — EN blå */ --blue: #2563eb; /* ⚠️⚠️ FACITS TRE NAMNLÖSA GRÅTONER. Mockupen skriver dem rakt i sina regler. * Att kopiera dem som råa värden hade lagt tre nya hårdkodade färger i * komponentlagret — precis det den här filens huvudkommentar förbjuder. * --line-stark kant på KONTROLLER (knapp, fält, chip). Mörkare än --line, * som är kant på YTOR (kort, tabellrader). * --muted-svag kolumnrubriker och etiketter — ett steg svagare än --muted. * --yta-svag kolumnernas topp och fot; en yta som ligger på kortet. */ --line-stark: #cbd3dd; --muted-svag: #8b95a6; --yta-svag: #fbfcfd; --blue-deep: #1d4ed8; --blue-soft: #8ab4ff; /* Geometri */ --radius-sm: 8px; /* ⚠️ FACIT: knappar, fält, chips-kanter, sidknappar */ --radius: 12px; /* kort, paneler, tabellceller */ --radius-lg: 18px; /* modaler */ /* ⚠️ SLÄPANDE POSTER — poster ur en tidigare period i avstämningen. * EGEN token, inte --warning-soft. De två var samma färg (#fffbeb) fram * till facit, som flyttar --warning-soft till #fdf6e3 och behåller den gula * här. Ett släp är inte en varning; det är en upplysning om varifrån raden * kommer. */ --slapande: #fffbeb; --slapande-kant: #e8dcae; --shadow: 0 1px 2px rgba(15,23,42,.06), 0 12px 32px -12px rgba(15,23,42,.16); --shadow-lg: 0 2px 6px rgba(15,23,42,.08), 0 28px 60px -20px rgba(15,23,42,.22); /* Typografi — variablerna injekteras av next/font i app/layout.tsx */ --font-heading: var(--font-fraunces), Georgia, serif; --font-body: var(--font-schibsted), system-ui, -apple-system, sans-serif; /* --- Alias: håll befintliga namn i style.css levande, peka om till nya systemet. INGA fler ändringar krävs i enskilda sidlayouter — de ärver via dessa aliaser. --- */ --bg: var(--cream); --white: var(--paper); --border: var(--line); --text-muted: var(--muted); /* ⚠️⚠️ EN DEFINITION AV --brand, HÄR. Den fanns i style.css också, med ETT * ANNAT VÄRDE (#1a365d), och style.css laddas EFTER tokens.css * (app/layout.tsx:58-60) — så marinblått ritades medan den som läste * tokens.css trodde att det var #2563eb. Två sanningar om samma färg. * * ⚠️ VÄRDET ÄR BESLUTAT, INTE FACITS. Mockupen ritar #1a365d eftersom det * var färgen som FAKTISKT ritades när den gjordes. Dylans beslut är * #2563eb — varumärkesfärgen provas fram under testperioden, och * plattformen är inte live. */ --brand: #2563eb; /* accent/primär (knappar, länkar, aktiva states) */ --brand-light: #EBF1F8; /* ⚠️ Låg lös i style.css; nu en riktig token. */ --brand-dark: var(--ink); /* mörk chrome/ytor */ --font: var(--font-body); /* ───────────────────────────────────────────────────────── * SEMANTISKA TOKENS (Etapp 0 — UI-omskinning) * * Lagrad ovanpå baspaletten så att komponenter beskrivs i * AVSIKT (success / warning / surface-card) i st.f. färg/ * geometri (grön / hex / 18px). De 219 hårdkodade hexarna i * SPA-sidorna ska migreras till dessa — INTE bli 219 lokala * beslut. * * Värden som inte passar någon befintlig token flaggas i PR:n * i st.f. att hårdkodas vidare. * ───────────────────────────────────────────────────────── */ /* Status / feedback — full + svag (soft) + djup (deep för text/border) */ /* ⚠️⚠️ DE SEX STATUSFÄRGERNA ÄR FACITS, OCH FACITS ÄR BYRÅVYNS v14. * --success-deep/--warning-deep/--danger-deep och deras -soft är hex för hex * identiska med --byravy-klar/--byravy-snart/--byravy-byra och deras -yta. * Mockupen uppfinner alltså ingen palett — den BEFORDRAR v14:s statusfärger * till plattformens. Byråvyns egna tokens står orörda i sitt namnrum. * * ⚠️ -soft GÅR FRÅN GENOMSKINLIG TILL OPAK. rgba(...,.10) ovanpå en gul rad * ger en annan färg än ovanpå en vit. Opaka värden ritar likadant överallt. */ --success: #00A550; --success-deep: #2e7d51; --success-soft: #ecf6f0; --warning: #f59e0b; --warning-deep: #8a6a08; --warning-soft: #fdf6e3; --danger: #dc2626; --danger-deep: #b3402f; --danger-soft: #fdeeec; /* ⚠️⚠️ ELVA ALIAS SOM ANVÄNDES UTAN ATT VARA DEFINIERADE. En odefinierad * variabel UTAN fallback gör hela deklarationen ogiltig, och webbläsaren * kastar den TYST: `background: var(--surface-alt)` blir ingen bakgrund * alls. Regelverkets block hade åtta sådana och ritades utan sina * statusfärger; dashboard och kundfakturor hade tre till. * * ⚠️ DE PEKAR OM, DE DEFINIERAR INTE NYTT. Färgerna finns redan och har * namn; åtta nya hexvärden hade fördubblat ordlistan för samma palett. * -bg → mjuk yta, -text → djup text/kant, -border → samma djup som texten * eftersom facits statusrutor ritas med kant i textens färg. */ --surface: var(--surface-card); --surface-alt: var(--surface-inset); --success-bg: var(--success-soft); --success-text: var(--success-deep); --success-border: var(--success-deep); --warning-bg: var(--warning-soft); --warning-text: var(--warning-deep); --warning-border: var(--warning-deep); --danger-bg: var(--danger-soft); --danger-text: var(--danger-deep); --danger-light: var(--danger-soft); --info: var(--blue); --info-deep: var(--blue-deep); --info-soft: rgba(37,99,235,.10); /* Yta-hierarki — beskriv VAR en yta hör, inte vilken färg den har */ --surface-page: var(--cream); /* sidans bakgrund */ --surface-card: var(--paper); /* kort / paneler */ --surface-inset: var(--cream-2); /* nedsänkta ytor: ikonramar, tabellhuvuden, badges */ --surface-dark: var(--ink); /* mörka sektioner (sidomenyn, platform-banner) */ --surface-on-dark: rgba(255,255,255,.06); /* subtila tonytor inuti mörka sektioner */ /* Text-hierarki — VIKT, inte storlek */ --text-primary: var(--ink); /* rubriker, primär brödtext */ --text-body: var(--text); /* vanlig brödtext */ --text-secondary: var(--muted); /* dämpad text, hjälptext, label */ --text-on-dark: #d8e1f0; /* text mot mörka sektioner */ /* Interaktion */ --focus-ring: 0 0 0 3px rgba(37,99,235,.30); --hover-tint: rgba(15,23,42,.04); --active-tint: rgba(15,23,42,.08); /* Spacing-skala — matchas mot landningssidans rytm */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; /* midpoint — refereras bl.a. av .auth-card padding */ --space-8: 32px; --space-10: 40px; --space-12: 48px; /* Sidluft (layout-rotorsaksfixen, docs/LAYOUT_PADDING_DIAGNOS.md): EN definition av sidopadding för hela plattformen — .main-content (SPA) och .standalone-page (fristående routes) läser samma tokens. Clamp ger responsivitet utan breakpoint-hopp (mobilminimum 16px inbyggt). */ --page-pad-x: clamp(16px, 3vw, 32px); --page-pad-y: clamp(16px, 2.5vw, 28px); /* Inre kort-padding (rotorsaksfixen, docs/KORT_INRE_PADDING_DIAGNOS.md): .card får denna som DEFAULT — kant-till-kant kräver explicit .card--flush. Max-värdena speglar .card-body:s klassiska --space-5/--space-6 (20/24px) → strukturerade kort ändras inte; clamp-minimum ger mobilluft utan breakpoint. */ --card-pad-y: clamp(16px, 2vw, 20px); --card-pad-x: clamp(16px, 2.5vw, 24px); /* Typografi-skala — Fraunces sparsamt (display + rubriker), Schibsted för allt annat. Storlekarna ärvs av .page-title, .stat-value, .section-head h2 m.fl. — inga lokala font-size:Xpx i komponentstilar. */ /* ⚠️ --fs-xs saknades men användes på fyra ställen i dashboard-blocket — * fyra typsnittsstorlekar som aldrig sattes. Samma steg som --fs-eyebrow. */ --fs-xs: .78rem; --fs-eyebrow: .78rem; --fs-sm: .85rem; --fs-body: .95rem; --fs-md: 1rem; --fs-lg: 1.1rem; --fs-lead: 1.15rem; /* midpoint mellan --fs-lg (1.1) och --fs-h3 (1.22); refereras av .att-granska-banner__chevron */ --fs-h3: 1.22rem; --fs-h2: clamp(1.65rem, 3.2vw, 2.2rem); /* sidtitlar i SPA */ --fs-h1: clamp(2rem, 4vw, 2.8rem); --fs-display: clamp(2rem, 4.2vw, 2.8rem); /* stat-värden, nyckeltal */ /* Geometri — touch */ --tap-target: 44px; /* WCAG-rekommendation */ /* Stat-tone-alias så .stat-value.green / .red kan migreras vidare till .stat-value[data-tone] utan att bryta dagens markup. */ --stat-positive: var(--success); --stat-negative: var(--danger); /* Breakpoints (som CSS-variabler kan inte användas i @media-villkor, men dokumenteras här som SOURCE OF TRUTH för komponentlagret). */ /* --bp-mobile: 480px; /* telefon */ /* --bp-tablet: 760px; /* tablet / split-collapse — matchar #381 */ /* --bp-desktop: 1080px; /* bred desktop */ }