/* GENERERET AF hubspot/theme/scripts/synk-kilder.sh — RET IKKE HER. Kilde: packages/ui/src/tokens/designtokens.css Filen er gitignoreret. Skal en værdi ændres, ændres den i kilden. Kildevalget og dets rækkefølge står i hubspot/theme/src/kilder.ts. */ /* ============================================================================= 12-designtokens.css — Viborg Museums booking- og kundeplatform PRODUKT OG STANDARDTEMA (kuratorvindue 21, 2026-09-29, MT-0; Martins beslutning 28/9 nr. 4 og 5; ADR-103) Platformen er et produkt for flere museer. Tokenlaget (navne, roller, kontrastkrav, tonemodel, skala) er PRODUKTETS og gælder alle museer. Farve-, skrift- og billedværdierne nedenfor er VIBORG MUSEUMS STANDARDTEMA: de er temafelternes værdier i Viborgs egen HubSpot-portal (portalprofilen hubspot/theme/profiler/147795778.json, der injiceres som standard i temaets fields.json af udrul.sh --portal=147795778; spike MT-P0: der findes intet API til temaindstillinger) og er de værdier, organisation nr. 1 ser. Et andet museum får sine egne værdier i sin egen portalprofil eller temaeditor; sætter det intet, får det produktets neutrale standard (13-design-korrektionsnotat.md afsnit 1a). Tokennavnene (--dk-* m.fl.) er tekniske navne og omdøbes ikke. TEMAFELTERNE — fem grupper i temaets fields.json logoer logo til lys flade, logo til mørk flade, faneikon farver 8 farvefelter (nedenfor) og valget «flader» skrifter overskrift og brødtekst (valg over en lukket liste) fotos faldback-fotos til kort og sidehoveder identitet museumsnavn (fald, når motorens profil ikke svarer; et «choice» med ét valg — «text» afvises af 2025.2), profil (profilens øjebliksbillede til de serverrenderede moduler, en overgang), entra_staff_tenant_id og entra_staff_client_id (medarbejdernes Entra til øerne; «ingen» = ingen Entra) — kuratorvindue 22, 2026-09-29 De 8 farvefelter og det token, hvert felt bærer. Værdierne står ved tokenet i afsnit 1 og 2 og er Viborgs; de ændres ikke her. primaer bærer --dk-bordeaux (afsnit 1) primaer_dyb bærer --dk-bordeaux-dyb (afsnit 1) accent bærer --dk-roed (afsnit 1) accent_tekst bærer --dk-roed-dyb (afsnit 1) accent_blegt bærer --dk-roed-blegt (afsnit 1) rolig_flade bærer --dk-sand (afsnit 1) sekundaer_tekst bærer --dk-graa-600 (afsnit 2) sidebaggrund bærer --dk-graa-25 (afsnit 2) Valget «flader»: «afledt» (--flade-* afledt af farverne med color-mix()) eller «tokenlag» (afsnit 3's målte værdier). Viborg står på «tokenlag». «afledt» afleder OGSÅ de tekst-, kant-, overlay- og skyggetoner, der ellers ville bære kunde nr. 1's kulør uden et felt (AFLEDTE_TONER i hubspot/theme/scripts/verificer-tema.mjs); de semantiske farver (--tone-*, --status-*, --tekst-fejl, --tekst-destruktiv m.fl.) afledes aldrig — de er produktets (kuratorvindue 22, 2026-09-29; MT-T3 fund 2). Kontrastkravet nedenfor gælder HVERT museums farver og måles pr. portal på den levende side af hubspot/theme/scripts/verificer-tema.sh. Rettet tokenlag til packages/ui. Genereret 3. august 2026. Kanonisk grundlag: KANONISKE-RETTELSER.md R12. ============================================================================= HVAD DENNE FIL ER Den er en RETTELSE af designleverancens :root-blok (Design/unpacked/"Viborg Museum bookingplatform.dc.html"), ikke et redesign. Brandidentiteten står fast: bordeaux #450019, Domkirkekvarterets røde, sandfarverne, Big Shoulders Display + Figtree. Alle 75 tokens fra designleverancen er gennemgået; de korrekte er bevaret uændret, de utilstrækkelige er rettet, og hver rettelse er dokumenteret med et MÅLT kontrastforhold. FACIT-REGLEN (bindende, se 13-design-korrektionsnotat.md afsnit 1) 08-skaermspecs-kundeflader.md og 09-skaermspecs-intern-app.md er facit for felter, funktioner, valideringer og tilstande. 04-motor-database-ddl.md er facit for statusværdier (enum). Designleverancen er kilde til tokens, komponentudtryk og visuel retning — intet andet. KONTRASTKRAV (WCAG 2.1 AA, KR-D-030, KR-SY-026, S8 §2.4) 1.4.3 brødtekst og små ikoner ≥ 4,5:1 1.4.3 stor tekst (≥ 24px, eller ≥ 18,66px fed) ≥ 3,0:1 1.4.11 UI-komponentgrænser og grafik der bærer betydning ≥ 3,0:1 Alle tal i denne fil er beregnet med WCAG 2.1's relative luminans-formel (sRGB-linearisering + 0,2126R/0,7152G/0,0722B, (L1+0,05)/(L2+0,05)) og afrundet til nærmeste med to decimaler (kuratorvindue 22: her stod «afrundet nedad»; 11 af 18 par passer kun med nærmeste — E12-S02 fund 2, MT-T2 fund 3 — og afrundingen afgør aldrig, om et krav er opfyldt). Referenceflader: hvid = #FFFFFF grå-25 = #F6F2F4 linje = #F0EAED sand = #ECE5E8 ============================================================================= */ :root { /* --------------------------------------------------------------------------- 1. BRAND — UÆNDRET fra designleverancen (KR-D-015, KR-SY-018) Aflæst i screendumps fra domkirkekvarteret.dk. Må ikke justeres. Værdierne er VIBORGS STANDARDTEMA (kuratorvindue 21, 2026-09-29, MT-0): de står som temafelter i gruppen «farver» i Viborgs portal, og «må ikke justeres» gælder Viborgs værdier. Et andet museums værdier kommer fra dets egen portal og skal opfylde de samme kontrastkrav som filens hoved (målt på den levende side af hubspot/theme/scripts/ verificer-tema.sh). --------------------------------------------------------------------------- */ --dk-bordeaux: #450019; /* Primær brandfarve. Flade til mørke sektioner, tekst, fokusring. ↳ hvid tekst på fladen 16,57:1 */ --dk-bordeaux-dyb: #2E0011; /* Dybeste bordeaux. Kodeflader, sidefod, overlejringsbund. ↳ hvid tekst på fladen 18,68:1 */ --dk-roed: #E4003C; /* Hjemmesidens signaturrøde. KUN flade + hvid tekst, aldrig lille tekst. ↳ hvid tekst på fladen 4,81:1; som tekst: hvid 4,81 · grå-25 4,34 · linje 4,06 · sand 3,88 */ --dk-roed-dyb: #B80031; /* Rød TEKST, rød ikonografi og røde fokusrammer. Erstatter --dk-roed i tekstrolle. ↳ hvid tekst på fladen 6,81:1; som tekst: hvid 6,81 · grå-25 6,14 · linje 5,74 · sand 5,50 */ --dk-roed-blegt: #F7BDCC; /* Deaktiveret primærknap (flade). Bærer aldrig information alene. ↳ knaptekst --knap-deaktiveret-tekst på den: 5,85:1 */ --dk-sand: #ECE5E8; /* Rolig sektionsflade. */ /* --------------------------------------------------------------------------- 2. NEUTRALE FLADER — UÆNDRET --------------------------------------------------------------------------- */ --dk-hvid: #FFFFFF; /* Kortflade, feltbaggrund, indholdsflade. */ --dk-graa-25: #F6F2F4; /* Sidebaggrund bag kort. */ --dk-graa-100: #E4DCE0; /* Dekorativ skillelinje. RETTET ROLLE: må ikke længere afgrænse komponenter. ↳ mod hvid kun 1,35:1 — utilstrækkelig som komponentgrænse (1.4.11) */ --dk-graa-300: #C9BEC5; /* Dekorativ tone. RETTET ROLLE: er ikke længere feltramme. ↳ mod hvid kun 1,80:1 — utilstrækkelig som komponentgrænse (1.4.11) */ --dk-graa-600: #7A5265; /* Sekundær tekst. ↳ som tekst: hvid 6,52 · grå-25 5,87 · linje 5,49 · sand 5,26 — mindst 5,26:1, består 4,5:1 */ --dk-graa-800: #5C2A40; /* Kraftig sekundær tekst, tabeloverskrifter. ↳ som tekst: hvid 11,29 · grå-25 10,17 · linje 9,51 · sand 9,11 — mindst 9,11:1, består 4,5:1 */ /* --------------------------------------------------------------------------- 3. FLADER DER MANGLEDE ET NAVN (nye tokens) Designet brugte disse hex-værdier uden token. Nu navngivet. --------------------------------------------------------------------------- */ --flade-hvid-varm: #FDF9FB; /* Varm hvid. 5 forekomster i designet. ↳ som flade under primær tekst --dk-bordeaux: 15,88:1 */ --flade-svag: #FBF8F9; /* Svagt tonet kortflade. 12 forekomster. ↳ som flade under primær tekst --dk-bordeaux: 15,70:1 */ --flade-rolig: #F4EFF2; /* Rolig indholdsflade. 3 forekomster. ↳ som flade under primær tekst --dk-bordeaux: 14,58:1 */ --flade-rolig-2: #F2EDF0; /* Rolig indholdsflade, et trin dybere. 13 forekomster. ↳ som flade under primær tekst --dk-bordeaux: 14,32:1 */ --flade-daempet: #E0D7DC; /* Dæmpet flade, fx tabelhoved. 18 af 42 forekomster var flade. ↳ som flade under primær tekst --dk-bordeaux: 11,78:1 */ --flade-daempet-2: #D8CDD3; /* Dæmpet flade, dybere. 6 forekomster. ↳ som flade under primær tekst --dk-bordeaux: 10,73:1 */ --flade-skravering: #E2DDE0; /* Stribe i skraveringsmønster for blokeret/utilgængelig tid. 22 forekomster. ↳ som flade under primær tekst --dk-bordeaux: 12,35:1 */ --flade-roed-svag: #FDF0F4; /* Rosa antydning. Valgt sprog, valgt kort, blød fremhævning. 14 forekomster. ↳ som flade under primær tekst --dk-bordeaux: 14,95:1 */ /* --------------------------------------------------------------------------- 4. TEKSTFARVER — RETTET Tre niveauer, alle testet mod de fire lyse flader. Ingen af dem falder under 4,5:1 på nogen flade de er godkendt til. --------------------------------------------------------------------------- */ --tekst-primaer: #450019; /* = --dk-bordeaux. hvid 16,57 · grå-25 14,94 · linje 13,97 · sand 13,37 */ --tekst-sekundaer: #7A5265; /* = --dk-graa-600. hvid 6,52 · grå-25 5,87 · linje 5,49 · sand 5,26 */ --tekst-daempet: #845C6D; /* RETTET. Erstatter designets #8C6274 (49 forekomster, faldt til 4,12:1 på sand). hvid 5,63 · grå-25 5,07 · linje 4,74 · sand 4,54 */ --tekst-deaktiveret: #845C6D; /* RETTET. Erstatter #C0B2B9 (2,04:1 mod hvid) og #9C8A93 (2,93:1 mod grå-25) i kalenderceller. Samme værdi som --tekst-daempet: deaktiveret tilstand bæres af stiplet kant + aria-disabled + ikon, ALDRIG af farve alene (KR-D-022). hvid 5,63 · grå-25 5,07 · linje 4,74 · sand 4,54 */ --tekst-fejl: #B80031; /* = --dk-roed-dyb. hvid 6,81 · grå-25 6,14 · linje 5,74 · sand 5,50 */ --tekst-destruktiv: #98202F; /* Aflys/slet. Adskilt fra brandrødt så «køb» og «slet» aldrig ligner hinanden. hvid 8,13 · grå-25 7,33 · linje 6,85 · sand 6,56 */ /* --------------------------------------------------------------------------- 5. KANTER — RETTET, OG NAVNGIVET EFTER ROLLE Den vigtigste rettelse i filen. Designet brugte én hårkant (#E4DCE0) og én feltramme (#C9BEC5) til både dekoration og komponentgrænser. En komponentgrænse skal bestå 1.4.11 (≥ 3,0:1); en ren dekorativ streg skal ikke. Derfor er de nu adskilt ved navn, så det er umuligt at bruge forkert. --------------------------------------------------------------------------- */ --kant-ui: #947E8C; /* RETTET. ENESTE tilladte farve på en komponentgrænse: tekstfelt, vælger, afkrydsning, radioknap, konturknap, kalendercelle, tabelramme, kortkant der kan klikkes. Afledt af #C9BEC5 med bevaret kulør (H≈322°), sænket lyshed. hvid 3,74 · grå-25 3,37 · linje 3,15 · sand 3,01 — mindst 3,01:1, består 1.4.11 på ALLE fire flader. Var #C9BEC5 = 1,80:1 mod hvid og 1,62:1 mod grå-25. */ --kant-felt: #947E8C; /* = --kant-ui. Eget navn, så en feltramme kan revideres uafhængigt af øvrige komponentgrænser. */ --kant-felt-fejl: #98202F; /* Fejltilstand på felt. hvid 8,13 · grå-25 7,33 · linje 6,85 · sand 6,56 */ --kant-markant: #450019; /* Valgt/aktiv kant. hvid 16,57 · grå-25 14,94 · linje 13,97 · sand 13,37 */ --kant-dekorativ: #E4DCE0; /* = --dk-graa-100. KUN rene skillelinjer uden betydning. 1,35:1 mod hvid — bevidst under 3:1, tilladt fordi stregen ikke bærer information (1.4.11 gælder ikke). Må ALDRIG omkranse et interaktivt element. */ --kant-dekorativ-svag:#F0EAED; /* Rækkeskillelinje i tabeller og lister. 85 forekomster i designet uden token. 1,19:1 mod hvid — samme forbehold. */ --kant-skravering: #E2DDE0; /* Stribe i skraveringsmønster (blokeret/utilgængelig). Mønstret — ikke farven — er informationsbæreren (KR-D-022). */ /* --------------------------------------------------------------------------- 6. PÅ MØRKE FLADER — NYT Aktørportalens sidebjælke, e-mailskabeloner, kodeflader og sidefoden ligger på bordeaux. Designet brugte fem unavngivne lyse nuancer her og rgba-hvid til kanter, der ikke består 1.4.11. Nu navngivet og rettet. Godkendte bundflader: #450019, #2E0011, #5C2A40. --------------------------------------------------------------------------- */ --paa-moerk-tekst: #FFFFFF; /* Primær tekst på mørk flade. ↳ bordeaux 16,57 · bordeaux-dyb 18,68 · grå-800 11,29 — mindst 11,29:1 */ --paa-moerk-tekst-sekundaer: #F0DCE3; /* Brødtekst på mørk flade. 2 forekomster uden token. ↳ bordeaux 12,67 · bordeaux-dyb 14,28 · grå-800 8,63 — mindst 8,63:1 */ --paa-moerk-tekst-daempet: #E0C4CF; /* Inaktivt navigationspunkt. 14 forekomster uden token. ↳ bordeaux 10,23 · bordeaux-dyb 11,53 · grå-800 6,97 — mindst 6,97:1 */ --paa-moerk-tekst-svag: #E8CFD8; /* Understøttende tekst. 2 forekomster uden token. ↳ bordeaux 11,32 · bordeaux-dyb 12,76 · grå-800 7,71 — mindst 7,71:1 */ --paa-moerk-label: #C79AAA; /* Versal-label i sidebjælken. 10 forekomster uden token. ↳ bordeaux 6,81 · bordeaux-dyb 7,68 · grå-800 4,64 — mindst 4,64:1 */ --paa-moerk-kode: #F3E2E8; /* Kodeblok på --dk-bordeaux-dyb. 1 forekomst uden token. ↳ bordeaux 13,30 · bordeaux-dyb 14,99 · grå-800 9,06 — mindst 9,06:1 */ --paa-moerk-succes: #8FE0B4; /* Grønt flueben-ikon på bordeaux. 2 forekomster uden token. ↳ bordeaux 10,65 · bordeaux-dyb 12,00 · grå-800 7,25 — mindst 7,25:1 */ --kant-ui-paa-moerk: rgba(255,255,255,.39); /* RETTET. Komponentgrænse på mørk flade. Designet brugte .12/.14/.18/.22 — alle under 1,9:1 og dermed i strid med 1.4.11. Ved 39 % opacitet: på #450019 → #8E6373 = 3,30:1 på #2E0011 → #80636E = 3,49:1 på #5C2A40 → #9C7D8A = 3,07:1 */ --kant-dekorativ-paa-moerk: rgba(255,255,255,.14); /* Ren dekorativ streg på mørk flade. Ingen betydning. */ /* --------------------------------------------------------------------------- 7. FOKUS — RETTET OG FAKTISK ANVENDT Designet definerede --fokus-moerk, men brugte den 0 gange og demonstrerede ingen fokustilstand på mørke flader. Her er begge ringe defineret, opdelt i farve + bredde, og bundet til en :focus-visible-regel nederst i filen. KR-D-030, KR-SY-026, WCAG 2.4.7 + 1.4.11. --------------------------------------------------------------------------- */ --fokus-farve-lys: #450019; /* Fokusring på LYSE flader. hvid 16,57 · grå-25 14,94 · linje 13,97 · sand 13,37 — mindst 13,37:1 */ --fokus-farve-moerk: #FFFFFF; /* Fokusring på MØRKE flader. bordeaux 16,57 · bordeaux-dyb 18,68 · grå-800 11,29 · #98202F 8,13 · #B80031 6,81 · #E4003C 4,81 · #7A5265 6,52 */ --fokus-bredde: 3px; --fokus-offset: 2px; --fokus-lys: var(--fokus-bredde) solid var(--fokus-farve-lys); --fokus-moerk: var(--fokus-bredde) solid var(--fokus-farve-moerk); /* --------------------------------------------------------------------------- 8. TONEMODELLEN — BÆRENDE LAG (S9 §2.8, KR-D-021, KR-D-016, KR-D-025) Syv toner. Hver tone har tekst, flade og kant. Et statusbadge bygges ALTID af de tre tokens og aldrig af en løs nuance. Tone er semantisk, ikke dekorativ: en ny statusværdi vælger en tone, ikke en farve. Det er den eneste måde at holde statusvisninger ensartede på tværs af bookingflow, webshop, kundeportal, aktørportal og cockpit. Farverne er designleverancens egne otte statusfamilier, gennuanceret så kanterne består 1.4.11. KR-D-022 / KR-SY-021: farve er ALDRIG eneste informationsbærer. Hvert badge skal have ikon og tekst. Tokens her leverer kun farven. --------------------------------------------------------------------------- */ /* NEUTRAL — Blågrå. Startpunkt, informationsstatus, intet krav om handling. tekst på egen flade 6,75:1 (krav 4,5) · tekst på hvid 7,90:1 kant mod hvid 3,52:1 · mod grå-25 3,18:1 · mod egen flade 3,01:1 (krav 3,0) flade mod hvid 1,17:1 — fladen alene bærer ingen information */ --tone-neutral-tekst: #3E5464; --tone-neutral-flade: #E8EEF1; --tone-neutral-kant: #658EA4; /* WAITING — Rav. Systemet eller en anden part skylder et svar; en frist løber. tekst på egen flade 6,01:1 (krav 4,5) · tekst på hvid 6,87:1 kant mod hvid 3,46:1 · mod grå-25 3,12:1 · mod egen flade 3,03:1 (krav 3,0) flade mod hvid 1,14:1 — fladen alene bærer ingen information */ --tone-waiting-tekst: #7D5113; --tone-waiting-flade: #F8EFDE; --tone-waiting-kant: #AD8335; /* PROGRESS — Indigo. Arbejdet er i gang eller delvist gennemført. tekst på egen flade 7,35:1 (krav 4,5) · tekst på hvid 8,67:1 kant mod hvid 3,55:1 · mod grå-25 3,20:1 · mod egen flade 3,01:1 (krav 3,0) flade mod hvid 1,18:1 — fladen alene bærer ingen information */ --tone-progress-tekst: #3B4A75; --tone-progress-flade: #E9ECF6; --tone-progress-kant: #7187BF; /* SUCCESS — Grøn. Positiv slutstatus. tekst på egen flade 7,36:1 (krav 4,5) · tekst på hvid 8,66:1 kant mod hvid 3,53:1 · mod grå-25 3,18:1 · mod egen flade 3,00:1 (krav 3,0) flade mod hvid 1,18:1 — fladen alene bærer ingen information */ --tone-success-tekst: #265440; --tone-success-flade: #E5EFE9; --tone-success-kant: #5B9477; /* ATTENTION — Blomme. Afvigelse, ændring eller udløbet frist — kræver et menneskes blik. tekst på egen flade 8,18:1 (krav 4,5) · tekst på hvid 9,68:1 kant mod hvid 3,55:1 · mod grå-25 3,20:1 · mod egen flade 3,00:1 (krav 3,0) flade mod hvid 1,18:1 — fladen alene bærer ingen information */ --tone-attention-tekst: #6B2C64; --tone-attention-flade: #F3E9F2; --tone-attention-kant: #AF75A5; /* CRITICAL — Rød. Afvisning, aflysning eller fejl. tekst på egen flade 6,83:1 (krav 4,5) · tekst på hvid 8,13:1 kant mod hvid 3,59:1 · mod grå-25 3,23:1 · mod egen flade 3,01:1 (krav 3,0) flade mod hvid 1,19:1 — fladen alene bærer ingen information */ --tone-critical-tekst: #98202F; --tone-critical-flade: #F9E7EA; --tone-critical-kant: #CA6A7A; /* MUTED — Grå. Lukket, arkiveret, forbrugt, tilbagetrukket eller irrelevant. tekst på egen flade 8,56:1 (krav 4,5) · tekst på hvid 10,22:1 kant mod hvid 3,61:1 · mod grå-25 3,26:1 · mod egen flade 3,02:1 (krav 3,0) flade mod hvid 1,19:1 — fladen alene bærer ingen information */ --tone-muted-tekst: #463F44; --tone-muted-flade: #EDEAEC; --tone-muted-kant: #93828C; /* --------------------------------------------------------------------------- 9. HVAD DER BLEV RETTET I STATUSPALETTEN Designets otte kantfarver lå på 1,49–1,70:1 mod hvid og bestod dermed ikke 1.4.11. Hver kant er sænket i lyshed med bevaret kulør og mætning, indtil den består 3,0:1 mod hvid, mod grå-25 OG mod sin egen flade. Tekstfarver og fladefarver er UÆNDREDE — de bestod allerede. tone design-kant før (hvid) rettet efter (hvid/grå-25/flade) neutral #C7D6DE 1,49 #658EA4 3,52 / 3,18 / 3,01 waiting #E3CDA4 1,55 #AD8335 3,46 / 3,12 / 3,03 progress #C3CCE4 1,61 #7187BF 3,55 / 3,20 / 3,01 success #B9D4C6 1,58 #5B9477 3,53 / 3,18 / 3,00 attention #DCC3D8 1,64 #AF75A5 3,55 / 3,20 / 3,00 critical #E7BCC3 1,70 #CA6A7A 3,59 / 3,23 / 3,01 muted #D2CBCF 1,59 #93828C 3,61 / 3,26 / 3,02 Den ottende designfamilie, oliven (--status-afsluttet #4F5530 / #EFF0E4 / #CFD2B6), er UDGÅET. S9 §2.8 giver `completed` tonen tone-muted, og tone-muted skal også bære `refunded`, `busy`, `withdrawn`, `expired`, `skipped` og `handed_over`. Grå læses entydigt som «lukket/arkiveret»; oliven ville læses som en selvstændig betydning og bryde KR-D-021. Se afsnit 16 for aliaset, der holder gamle referencer i live. --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- 10. BETALINGSPALETTEN — RETTET (R12) Designet havde fem betalingstokens, heriblandt --pay-restance. «Restance» er IKKE en status i systemet: economy.payment_status (S4) har syv værdier og ingen af dem hedder restance. Tokenet er SLETTET. Paletten er nu economy.payment_status' syv faktiske værdier med de danske labels fra S8 §16.2, hver bundet til sin tone fra S9 §2.8. --------------------------------------------------------------------------- */ --pay-pending: var(--tone-waiting-tekst); /* Afventende tone-waiting, tekst på flade 6,01:1 */ --pay-sent: var(--tone-progress-tekst); /* Udsendt tone-progress, tekst på flade 7,35:1 */ --pay-completed: var(--tone-success-tekst); /* Gennemført tone-success, tekst på flade 7,36:1 */ --pay-partially_refunded: var(--tone-attention-tekst); /* Delvist refunderet tone-attention, tekst på flade 8,18:1 */ --pay-refunded: var(--tone-muted-tekst); /* Refunderet tone-muted, tekst på flade 8,56:1 */ --pay-declined: var(--tone-critical-tekst); /* Afvist tone-critical, tekst på flade 6,83:1 */ --pay-cancelled: var(--tone-critical-tekst); /* Annulleret tone-critical, tekst på flade 6,83:1 */ --pay-pending-flade: var(--tone-waiting-flade); --pay-sent-flade: var(--tone-progress-flade); --pay-completed-flade: var(--tone-success-flade); --pay-partially_refunded-flade: var(--tone-attention-flade); --pay-refunded-flade: var(--tone-muted-flade); --pay-declined-flade: var(--tone-critical-flade); --pay-cancelled-flade: var(--tone-critical-flade); --pay-pending-kant: var(--tone-waiting-kant); --pay-sent-kant: var(--tone-progress-kant); --pay-completed-kant: var(--tone-success-kant); --pay-partially_refunded-kant: var(--tone-attention-kant); --pay-refunded-kant: var(--tone-muted-kant); --pay-declined-kant: var(--tone-critical-kant); --pay-cancelled-kant: var(--tone-critical-kant); /* --------------------------------------------------------------------------- 11. AKTØRSVAR (KR-D-026) — RETTET Designets --svar-manglende var #8A2B1E, en rustrød uden for enhver tonefamilie. Manglende svar er ikke en fejl, men et opfølgningspunkt: tone-attention. Synligheden kommer fra `attention_badge` (S9 §2.4) og ikonet, ikke fra farven (KR-D-006, KR-D-022). --------------------------------------------------------------------------- */ --svar-yes: var(--tone-success-tekst); /* Ja tone-success */ --svar-no: var(--tone-critical-tekst); /* Nej tone-critical */ --svar-pending: var(--tone-waiting-tekst); /* Afventer tone-waiting */ --svar-missing: var(--tone-attention-tekst); /* Manglende svar tone-attention */ /* --------------------------------------------------------------------------- 12. TYPOGRAFI — UÆNDRET fra designleverancen Big Shoulders Display + Figtree er STAND-IN, indtil museets licensfiler foreligger. Udskiftning må kun ske i --font-display og --font-broed; skalaen står fast, så ombrydning ikke skal gennemgås to gange. Skrifterne er temafelter i gruppen «skrifter» (kuratorvindue 21, 2026-09-29, MT-0) — valgfelter over en lukket liste, fordi et temas fields.json intet egentligt skriftfelt har (spike MT-P0): Big Shoulders Display + Figtree er VIBORGS valg, sat i Viborgs portal. Produktets neutrale standard er systemskriften (system-ui, sans-serif) i begge roller. Skalaen er produktets og står fast for alle museer. Bemærk: --type-* sætter kun font-shorthand. text-transform: uppercase på display-niveauerne sættes i komponenten, ikke i tokenet, fordi versal-tekst på engelsk bliver bredere (design-brief afsnit 2.10). --------------------------------------------------------------------------- */ --font-display: 'Big Shoulders Display', sans-serif; --font-broed: 'Figtree', system-ui, sans-serif; --type-display-xl: 600 56px/1 var(--font-display); /* stor tekst — kontrastkrav 3,0:1 */ --type-display-l: 600 40px/1.05 var(--font-display); /* stor tekst */ --type-display-m: 600 28px/1.1 var(--font-display); /* stor tekst */ --type-display-s: 600 20px/1.15 var(--font-display); /* IKKE stor tekst: 20px < 24px → 4,5:1 */ --type-broed-l: 400 18px/1.6 var(--font-broed); /* 4,5:1 */ --type-broed-m: 400 16px/1.6 var(--font-broed); /* 4,5:1 */ --type-broed-s: 400 14px/1.5 var(--font-broed); /* 4,5:1 */ --type-label: 700 12px/1.33 var(--font-broed); /* 4,5:1 */ --label-spacing: .12em; --tabular: tabular-nums; /* NYT. Klokkeslæt, beløb, antal og nedtælling skal stå i tabulære tal, ellers hopper 30-minutters-timeren. */ /* --------------------------------------------------------------------------- 13. SPACING, FORM OG SKYGGE — UÆNDRET --------------------------------------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --radius-0: 0; /* Domkirkekvarterets udtryk er retkantet. */ --radius-1: 2px; /* Kun badges og chips. */ --skygge-overlay: 0 10px 34px rgba(69,0,25,.20); --skygge-loeftet: 0 2px 10px rgba(69,0,25,.10); /* NYT: navngiver designets anden skyggeværdi. */ --overlay-baggrund: rgba(46,0,17,.55); /* NYT: modal-bagtæppe, var unavngivet. */ --kant-haar: 1px solid var(--kant-dekorativ); /* BEVARET NAVN, ny værdi-rolle: dekorativ. */ --kant-komponent: 1px solid var(--kant-ui); /* NYT: brug denne omkring alt interaktivt. */ /* --------------------------------------------------------------------------- 14. BRYDEPUNKTER — NYT (KR-D-029) Designleverancen indeholder 0 @media-forespørgsler og kun 3 mobilrammer i alt. Brydepunkterne er derfor fastlagt her og er bindende. VIGTIGT: en CSS-variabel kan IKKE bruges i en @media-forespørgsel. Tokenene nedenfor er den kanoniske KILDE til værdierne og skal eksporteres til SCSS/TS ved build (packages/ui/src/tokens.ts), så @media-reglerne skrives med de literale pixelværdier og aldrig divergerer. Skriv @media (min-width: 600px), ikke var(--bp-tablet). mobil 0 – 599px base, ingen forespørgsel tablet 600 – 1023px @media (min-width: 600px) desktop 1024 – 1439px @media (min-width: 1024px) bred 1440px og op @media (min-width: 1440px) Regel (KR-D-029, design-brief afsnit 2.8): Bookingflow, webshop og aktørportal er MOBILE-FIRST — basislaget er mobil, og hvert af bookingflowets otte trin skal have en fuldt specificeret mobilvisning. DP-cockpittet er DESKTOP-FIRST, men skal være brugbart på tablet: ingen central funktion må falde bort under 1024px; tabeller får vandret rul med fastfrosset første kolonne, ikke skjulte kolonner. --------------------------------------------------------------------------- */ --bp-mobil: 0; --bp-mobil-max: 599px; --bp-tablet: 600px; --bp-tablet-max: 1023px; --bp-desktop: 1024px; --bp-desktop-bred: 1440px; /* Indholdsbredder, aflæst i designleverancen og nu navngivet */ --bredde-side: 1180px; /* Ydre indholdsbredde i cockpit og kundeflader. */ --bredde-flow: 700px; /* Bookingflowets kolonne. */ --bredde-smal: 620px; /* Login, L1/L2, fejlsider. */ --bredde-tekst: 70ch; /* Brødtekstmål. Designet varierede 62–88ch; 70ch er normalen. */ --bredde-mobil-ramme: 340px; /* Mobilmockup-bredde i designleverancen. */ --min-maalflade: 44px; /* NYT. Mindste berøringsmål (WCAG 2.5.5 AAA / 2.5.8 AA i 2.2). Designet specificerer ingen — kalendercellerne og tælleknapperne i trin 4 er under dette på mobil. */ /* --------------------------------------------------------------------------- 15. FORRETNINGSREGLER MED VISUEL KONSEKVENS — UÆNDRET Tallene er visningskonstanter. Den autoritative kilde er motorens regelkonfiguration (S5); fladen må aldrig regne på dem selv (S8 §2.7). --------------------------------------------------------------------------- */ --reservation-minutter: 30; --reservation-advarsel-minutter: 5; --slot-granularitet-minutter: 15; --kort-varsel-dage: 14; /* NYT: KR-K-026, vises i trin 3, kurv, trin 8, kvittering. */ --afvigelse-tolerance-procent: 20; /* NYT: S9 §3.7 A7. UI-konstant i fase 1 (AFGJORT). */ /* --------------------------------------------------------------------------- 16. TREDJEPARTSMÆRKER — NYT Kortordningernes egne farver. WCAG 1.4.3's logotype-undtagelse gælder: de må ikke justeres. De skal derfor ALTID ledsages af tekstnavnet, så betalingsmetoden kan læses uden farve (KR-D-022). --------------------------------------------------------------------------- */ --brand-visa: #1A1F71; --brand-mastercard: #EB001B; --brand-mobilepay: #5A78FF; /* --------------------------------------------------------------------------- 17. KNAPPER — navngivning af designets hardkodede knapfarver --------------------------------------------------------------------------- */ --knap-primaer-flade: #E4003C; /* hvid tekst 4,81:1 — består 4,5:1 */ --knap-primaer-flade-hover: #B80031; /* hvid tekst 6,81:1 */ --knap-sekundaer-flade: #450019; /* hvid tekst 16,57:1 */ --knap-destruktiv-flade: #98202F; /* hvid tekst 8,13:1 */ --knap-destruktiv-hover: #7C1926; /* hvid tekst 10,38:1 — 1 forekomst uden token */ --knap-deaktiveret-flade: #F7BDCC; --knap-deaktiveret-tekst: #7A2B3D; /* 5,85:1 på den blege flade — 4 forekomster uden token. Deaktiveret tilstand SKAL desuden bære aria-disabled og en forklarende tekst ved siden af knappen (KR-D-017–020). */ --knap-tekst-farve: #B80031; /* Tekstknap på lys flade. 6,14:1 mod grå-25 */ } /* ============================================================================= 18. ENUM → TONE: DEN KOMPLETTE MAPPINGTABEL ============================================================================= Facit for VÆRDIERNE er 04-motor-database-ddl.md (`CREATE TYPE ... AS ENUM`) sammenholdt med R1 i KANONISKE-RETTELSER.md. Facit for TONERNE er 09-skaermspecs-intern-app.md §2.8. Facit for de danske LABELS er 08-skaermspecs-kundeflader.md §16 og S9 §2.8. BROEN MELLEM DANSK OG ENGELSK — læs dette, før du navngiver noget. Designleverancen brugte danske tokennavne (--status-modtaget), mens enum-værdien i databasen, API'et og alle kontrakter er engelsk (`received`). Det er en fejlkilde: en frontend-agent skal ellers oversætte i hovedet mellem det, API'et sender, og det, tokenet hedder. Reglen her er derfor: 1. TOKENNAVNE og KLASSENAVNE er ENGELSKE og staves nøjagtigt som enum-værdien fra S4. `received`, ikke `modtaget`. 2. DANSKE LABELS er DATA, ikke design. S8 §16 er utvetydig: «Koden er den stabile nøgle; teksten er visningsklar og leveres af API'et.» Fladen viser det, API'et sender (fx `status_label`, `state_label`) — den må ikke slå labels op i CSS. 3. Tabellen nedenfor er den bindende oversættelsesnøgle. Den bruges til at verificere API'ets tekster og til at oversætte til `en`, ikke som runtime-kilde. 4. De gamle danske tokennavne findes som alias i afsnit 21, så designleverancens eksempler stadig kan læses. De er UDFASEDE. --------------------------------------------------------------------------- core.booking_status [S9 §2.8 + S8 §16.1 (facit)] værdi (kanonisk) dansk label tone -------------------------------------------------------------------------- received Modtaget tone-neutral awaiting Afventer tone-waiting assigned Tildelt tone-progress confirmed Bekræftet tone-success changed Ændret tone-attention rejected Afvist tone-critical cancelled Aflyst tone-critical completed Afsluttet tone-muted core.session_status [S9 §2.8 + S8 §16.3 (facit)] værdi (kanonisk) dansk label tone -------------------------------------------------------------------------- planned Planlagt tone-neutral awaiting_assignment Afventer tildeling tone-waiting assigned Tildelt tone-progress confirmed Bekræftet tone-success changed Ændret tone-attention cancelled Aflyst tone-critical completed Afsluttet tone-muted economy.payment_status [S9 §2.8 + S8 §16.2 (facit)] værdi (kanonisk) dansk label tone -------------------------------------------------------------------------- pending Afventende tone-waiting sent Udsendt tone-progress completed Gennemført tone-success partially_refunded Delvist refunderet tone-attention refunded Refunderet tone-muted declined Afvist tone-critical cancelled Annulleret tone-critical economy.order_status [S4 + R1 (facit); S8 §16.3 mangler draft/failed og nævner expired] værdi (kanonisk) dansk label tone -------------------------------------------------------------------------- draft Kladde tone-neutral awaiting_payment Afventer betaling tone-waiting paid Betalt tone-success partially_refunded Delvist refunderet tone-attention refunded Refunderet tone-muted cancelled Annulleret tone-critical failed Fejlet tone-critical ticketing.ticket_status [S4 + R1 (facit); labels fra S8 §16.3] værdi (kanonisk) dansk label tone -------------------------------------------------------------------------- issued Udstedt tone-neutral valid Gyldig tone-success used Brugt tone-muted cancelled Annulleret tone-critical refunded Refunderet tone-muted expired Udløbet tone-muted ticketing.qr_status [S4 + R1 (deactivated → revoked)] værdi (kanonisk) dansk label tone -------------------------------------------------------------------------- active Aktiv tone-success redeemed Indløst tone-muted expired Udløbet tone-muted revoked Spærret tone-critical economy.gift_card_status [S4 + R1] værdi (kanonisk) dansk label tone -------------------------------------------------------------------------- active Aktivt tone-success depleted Opbrugt tone-muted expired Udløbet tone-muted cancelled Annulleret tone-critical core.activity_status [S4] værdi (kanonisk) dansk label tone -------------------------------------------------------------------------- draft Kladde tone-neutral published Offentliggjort tone-success sold_out Udsolgt tone-attention cancelled Aflyst tone-critical completed Afsluttet tone-muted core.flow_status [S9 §2.8 (facit)] værdi (kanonisk) dansk label tone -------------------------------------------------------------------------- active Aktiv tone-progress awaiting_response Afventer svar tone-waiting stopped Stoppet tone-attention failed Fejlet tone-critical completed Afsluttet tone-muted core.assignment_status [S4 + R1 (10 værdier) — S9 §2.8 nævner 6 andre; S4 vinder; cancelled/handed_over-labels = S5 §7.1 + S9 §2.8, BUG-841, kuratorvindue 11] værdi (kanonisk) dansk label tone -------------------------------------------------------------------------- proposed Foreslået tone-neutral requested Forespurgt tone-waiting accepted Accepteret tone-success declined Afvist tone-attention assigned Tildelt tone-progress confirmed Bekræftet tone-success cancelled Annulleret tone-critical handed_over Overdraget tone-muted completed Gennemført tone-muted no_show Udeblevet tone-critical core.assignment_request_status [S4 + R1; toner fra S9 §2.8] værdi (kanonisk) dansk label tone -------------------------------------------------------------------------- sent Afventer svar tone-waiting reminded Påmindelse sendt tone-waiting accepted Accepteret tone-success declined Afvist tone-attention expired Frist udløbet tone-attention withdrawn Trukket tilbage tone-muted superseded Sendt videre tone-muted core.handover_status [S4 + R1; S9 §2.8: tone som forespørgselsstatus] værdi (kanonisk) dansk label tone -------------------------------------------------------------------------- open Afventer tone-waiting accepted Accepteret tone-success declined Afvist tone-attention expired Frist udløbet tone-attention cancelled Annulleret tone-muted resolved_by_dp Løst af DP tone-progress resulted_in_cancellation Førte til aflysning tone-critical core.change_request_status [S4 + R1 (8 værdier)] værdi (kanonisk) dansk label tone -------------------------------------------------------------------------- submitted Indsendt tone-neutral under_evaluation Under vurdering tone-progress awaiting_actor_acceptance Afventer aktørens accept tone-waiting awaiting_customer_confirm Afventer kundens bekræftelse tone-waiting approved Godkendt tone-success applied Gennemført tone-success rejected Afvist tone-critical withdrawn Trukket tilbage tone-muted core.waitlist_status [S4 + S8 §16.3 (facit for labels)] værdi (kanonisk) dansk label tone -------------------------------------------------------------------------- waiting På venteliste tone-waiting offered Plads tilbudt tone-attention converted Plads købt tone-success withdrawn Afmeldt tone-muted core.waitlist_offer_status [S4] værdi (kanonisk) dansk label tone -------------------------------------------------------------------------- sent Tilbud sendt tone-waiting accepted Accepteret tone-success declined Afvist tone-muted expired Tilbud udløbet tone-attention realtime.availability_state [S4 + R1; toner fra S9 §2.8 (tentative = "eventuel ledig")] værdi (kanonisk) dansk label tone -------------------------------------------------------------------------- available Ledig tone-success tentative Eventuel ledig tone-attention busy Optaget tone-muted realtime.cart_status [S4 + S8 §16.3 (facit for labels)] værdi (kanonisk) dansk label tone -------------------------------------------------------------------------- open Åben tone-progress expired Udløbet tone-attention converted Gennemført tone-success released Frigivet tone-muted realtime.reservation_status [S4 + R1 + S8 §16.3] værdi (kanonisk) dansk label tone -------------------------------------------------------------------------- active Aktiv tone-progress released Frigivet tone-muted converted Gennemført tone-success expired Udløbet tone-attention comm.delivery_status [S4 + R1 (7 værdier)] værdi (kanonisk) dansk label tone -------------------------------------------------------------------------- queued I kø tone-neutral sent Sendt tone-progress delivered Leveret tone-progress opened Åbnet tone-success read Læst tone-success failed Fejlet tone-critical bounced Afvist af modtager tone-critical comm.alert_severity [S4] værdi (kanonisk) dansk label tone -------------------------------------------------------------------------- info Information tone-neutral warning Advarsel tone-attention critical Kritisk tone-critical sync.outbox_status [S4 (S6 §8.6, regelscope sync jf. R3)] værdi (kanonisk) dansk label tone -------------------------------------------------------------------------- pending Afventer tone-waiting in_flight Undervejs tone-progress delivered Leveret tone-success failed Fejlet tone-critical dead_letter Død besked tone-critical skipped Sprunget over tone-muted sync.inbound_status [S4] værdi (kanonisk) dansk label tone -------------------------------------------------------------------------- received Modtaget tone-neutral processed Behandlet tone-success ignored Ignoreret tone-muted failed Fejlet tone-critical core.actor_status [S4] værdi (kanonisk) dansk label tone -------------------------------------------------------------------------- active Aktiv tone-success temporarily_unavailable Midlertidigt utilgængelig tone-attention deactivated Deaktiveret tone-muted ticketing.qr_result [S4 — resultat af scanning (A23)] værdi (kanonisk) dansk label tone -------------------------------------------------------------------------- valid Gyldig tone-success already_redeemed Allerede indløst tone-attention expired Udløbet tone-attention unknown Ukendt kode tone-critical not_permitted Ikke tilladt tone-critical core.unavailability_reason [S4 + R1 — vises altid med skraveret mønster (S9 §2.8)] værdi (kanonisk) dansk label tone -------------------------------------------------------------------------- vacation Ferie tone-muted sick_leave Sygdom tone-muted closed_period Lukkeperiode tone-muted other Andet tone-muted (ingen enum — KR-D-026, S9 §2.8/§5.2) [Aggregeret aktørsvar i DP-visninger] værdi (kanonisk) dansk label tone -------------------------------------------------------------------------- yes Ja tone-success no Nej tone-critical pending Afventer tone-waiting missing Manglende svar tone-attention (ingen enum — S8 §16.3 "Ledighed") [Ledighed på kunde- og webshopflader] værdi (kanonisk) dansk label tone -------------------------------------------------------------------------- available Ledige pladser tone-success few_left Få tilbage tone-attention sold_out Udsolgt tone-critical closed Lukket tone-muted (ingen enum — S8 §16.4, KR-SY-020/KR-D-011) [Trinvis brugerrejse; state_label fra API er autoritativ] værdi (kanonisk) dansk label tone -------------------------------------------------------------------------- done Gennemført tone-success current I gang tone-progress pending Afventer tone-waiting failed Mislykkedes tone-critical skipped Sprunget over tone-muted AFVIGELSER MELLEM S9 §2.8 OG S4 — noteret, S4 vinder (facit-princippet) · assignment_status: S9 §2.8 lister assigned/confirmed/handover_pending/ cancelled_by_actor/cancelled/completed. S4 + R1 har ti værdier (proposed, requested, accepted, declined, assigned, confirmed, cancelled, handed_over, completed, no_show). S4's værdier bruges. S9's tonehensigt er ført over: «afventer overdragelse» → waiting, «aflyst af aktør» → attention. · assignment_request_status: S9's `pending` er S4's `sent`; S9's `escalated` er S4's `superseded`. Tonerne følger med. · availability: S9 skriver `possibly_available`; S4's enum hedder `tentative`. Samme tilstand, samme tone. · order_status: S8 §16.3 lister `expired`, som ikke findes i economy.order_status. S4 + R1 er facit; `expired` mappes ikke. ÅBENT PUNKT til spec-kurator — se korrektionsnotatets afsnit 9. ============================================================================= */ /* ============================================================================= 19. ENUM → TONE SOM BRUGBARE SELEKTORER ============================================================================= Tre måder at bruge tonen på, alle sætter de samme tre variable: --tone-tekst, --tone-flade, --tone-kant a) Direkte: b) Via statusværdi: — så kan fladen skrive API'ets råværdi direkte ind uden en oversættelse i JSX, og en ukendt værdi falder tilbage til tone-neutral. c) Via egen tone: Attributnavnet er enum'ets navn i kebab-case uden skemapræfiks: core.booking_status → data-booking-status economy.payment_status → data-payment-status core.assignment_request_status → data-assignment-request-status ============================================================================= */ .tone-neutral, [data-tone="neutral"], [data-booking-status="received"], [data-session-status="planned"], [data-order-status="draft"], [data-ticket-status="issued"], [data-activity-status="draft"], [data-assignment-status="proposed"], [data-change-request-status="submitted"], [data-delivery-status="queued"], [data-alert-severity="info"], [data-inbound-status="received"] { --tone-tekst: var(--tone-neutral-tekst); --tone-flade: var(--tone-neutral-flade); --tone-kant: var(--tone-neutral-kant); } .tone-waiting, [data-tone="waiting"], [data-booking-status="awaiting"], [data-session-status="awaiting_assignment"], [data-payment-status="pending"], [data-order-status="awaiting_payment"], [data-flow-status="awaiting_response"], [data-assignment-status="requested"], [data-assignment-request-status="sent"], [data-assignment-request-status="reminded"], [data-handover-status="open"], [data-change-request-status="awaiting_actor_acceptance"], [data-change-request-status="awaiting_customer_confirm"], [data-waitlist-status="waiting"], [data-waitlist-offer-status="sent"], [data-outbox-status="pending"], [data-actor-response="pending"], [data-journey-state="pending"] { --tone-tekst: var(--tone-waiting-tekst); --tone-flade: var(--tone-waiting-flade); --tone-kant: var(--tone-waiting-kant); } .tone-progress, [data-tone="progress"], [data-booking-status="assigned"], [data-session-status="assigned"], [data-payment-status="sent"], [data-flow-status="active"], [data-assignment-status="assigned"], [data-handover-status="resolved_by_dp"], [data-change-request-status="under_evaluation"], [data-cart-status="open"], [data-reservation-status="active"], [data-delivery-status="sent"], [data-delivery-status="delivered"], [data-outbox-status="in_flight"], [data-journey-state="current"] { --tone-tekst: var(--tone-progress-tekst); --tone-flade: var(--tone-progress-flade); --tone-kant: var(--tone-progress-kant); } .tone-success, [data-tone="success"], [data-booking-status="confirmed"], [data-session-status="confirmed"], [data-payment-status="completed"], [data-order-status="paid"], [data-ticket-status="valid"], [data-qr-status="active"], [data-gift-card-status="active"], [data-activity-status="published"], [data-assignment-status="accepted"], [data-assignment-status="confirmed"], [data-assignment-request-status="accepted"], [data-handover-status="accepted"], [data-change-request-status="approved"], [data-change-request-status="applied"], [data-waitlist-status="converted"], [data-waitlist-offer-status="accepted"], [data-availability-state="available"], [data-cart-status="converted"], [data-reservation-status="converted"], [data-delivery-status="opened"], [data-delivery-status="read"], [data-outbox-status="delivered"], [data-inbound-status="processed"], [data-actor-status="active"], [data-qr-result="valid"], [data-actor-response="yes"], [data-availability-offer="available"], [data-journey-state="done"] { --tone-tekst: var(--tone-success-tekst); --tone-flade: var(--tone-success-flade); --tone-kant: var(--tone-success-kant); } .tone-attention, [data-tone="attention"], [data-booking-status="changed"], [data-session-status="changed"], [data-payment-status="partially_refunded"], [data-order-status="partially_refunded"], [data-activity-status="sold_out"], [data-flow-status="stopped"], [data-assignment-status="declined"], [data-assignment-request-status="declined"], [data-assignment-request-status="expired"], [data-handover-status="declined"], [data-handover-status="expired"], [data-waitlist-status="offered"], [data-waitlist-offer-status="expired"], [data-availability-state="tentative"], [data-cart-status="expired"], [data-reservation-status="expired"], [data-alert-severity="warning"], [data-actor-status="temporarily_unavailable"], [data-qr-result="already_redeemed"], [data-qr-result="expired"], [data-actor-response="missing"], [data-availability-offer="few_left"] { --tone-tekst: var(--tone-attention-tekst); --tone-flade: var(--tone-attention-flade); --tone-kant: var(--tone-attention-kant); } .tone-critical, [data-tone="critical"], [data-booking-status="rejected"], [data-booking-status="cancelled"], [data-session-status="cancelled"], [data-payment-status="declined"], [data-payment-status="cancelled"], [data-order-status="cancelled"], [data-order-status="failed"], [data-ticket-status="cancelled"], [data-qr-status="revoked"], [data-gift-card-status="cancelled"], [data-activity-status="cancelled"], [data-flow-status="failed"], [data-assignment-status="cancelled"], [data-assignment-status="no_show"], [data-handover-status="resulted_in_cancellation"], [data-change-request-status="rejected"], [data-delivery-status="failed"], [data-delivery-status="bounced"], [data-alert-severity="critical"], [data-outbox-status="failed"], [data-outbox-status="dead_letter"], [data-inbound-status="failed"], [data-qr-result="unknown"], [data-qr-result="not_permitted"], [data-actor-response="no"], [data-availability-offer="sold_out"], [data-journey-state="failed"] { --tone-tekst: var(--tone-critical-tekst); --tone-flade: var(--tone-critical-flade); --tone-kant: var(--tone-critical-kant); } .tone-muted, [data-tone="muted"], [data-booking-status="completed"], [data-session-status="completed"], [data-payment-status="refunded"], [data-order-status="refunded"], [data-ticket-status="used"], [data-ticket-status="refunded"], [data-ticket-status="expired"], [data-qr-status="redeemed"], [data-qr-status="expired"], [data-gift-card-status="depleted"], [data-gift-card-status="expired"], [data-activity-status="completed"], [data-flow-status="completed"], [data-assignment-status="handed_over"], [data-assignment-status="completed"], [data-assignment-request-status="withdrawn"], [data-assignment-request-status="superseded"], [data-handover-status="cancelled"], [data-change-request-status="withdrawn"], [data-waitlist-status="withdrawn"], [data-waitlist-offer-status="declined"], [data-availability-state="busy"], [data-cart-status="released"], [data-reservation-status="released"], [data-outbox-status="skipped"], [data-inbound-status="ignored"], [data-actor-status="deactivated"], [data-unavailability-reason="vacation"], [data-unavailability-reason="sick_leave"], [data-unavailability-reason="closed_period"], [data-unavailability-reason="other"], [data-availability-offer="closed"], [data-journey-state="skipped"] { --tone-tekst: var(--tone-muted-tekst); --tone-flade: var(--tone-muted-flade); --tone-kant: var(--tone-muted-kant); } /* ============================================================================= 20. DANSKE LABELS SOM TOKENS — designtidsreference, IKKE runtime-kilde ============================================================================= Kun de to kataloger designleverancen selv leverede, så et komponentgalleri kan rendere uden API. Runtime-kilden er ALTID API'ets label-felt (S8 §16). Hardkodes de i fladen, går den engelske version i stykker (KR-K-005, design-brief afsnit 2.10) og DP mister muligheden for at rette teksten uden ny udrulning (KR-SY-134). Resten af katalogerne står i tabellen i afsnit 18. ============================================================================= */ :root { --label-booking-received: "Modtaget"; --label-booking-awaiting: "Afventer"; --label-booking-assigned: "Tildelt"; --label-booking-confirmed: "Bekræftet"; --label-booking-changed: "Ændret"; --label-booking-rejected: "Afvist"; --label-booking-cancelled: "Aflyst"; --label-booking-completed: "Afsluttet"; --label-payment-pending: "Afventende"; --label-payment-sent: "Udsendt"; --label-payment-completed: "Gennemført"; --label-payment-partially_refunded: "Delvist refunderet"; --label-payment-refunded: "Refunderet"; --label-payment-declined: "Afvist"; --label-payment-cancelled: "Annulleret"; } /* ============================================================================= 21. UDGÅEDE TOKENS OG NAVNGIVNING AF DE SIDSTE HEX-VÆRDIER ============================================================================= Designleverancen indeholder 69 unikke hex-værdier i 2.546 forekomster. Efter denne fil har hver eneste af dem et navn eller en efterfølger. Ingen farve står tilbage uden. A. SLETTET UDEN ERSTATNING -------------------------------------------------------------------------- --pay-restance #8A2B1E «Restance» er ikke en status. economy.payment_status har syv værdier og ingen af dem er restance. Findes 0 gange i S4, S8 og S9. SLETTET (R12). #8A2B1E, #F7E9E5, #E5C4BB og #C98E80 var kun i brug til dette badge og til --svar-manglende; de er alle erstattet af tone-attention. B. OMDØBT — samme farve, nyt navn (ingen visuel ændring) -------------------------------------------------------------------------- #F0EAED → --kant-dekorativ-svag 85 forekomster, alle border-bottom/-top #E0D7DC → --flade-daempet 42 forekomster: 18 flade, 24 kant (kant → --kant-dekorativ) #E2DDE0 → --flade-skravering 22 forekomster, stribe i blokeret-mønster #FDF0F4 → --flade-roed-svag 14 forekomster, valgt sprog / valgt kort #F2EDF0 → --flade-rolig-2 13 forekomster #FBF8F9 → --flade-svag 12 forekomster #E0C4CF → --paa-moerk-tekst-daempet 14 forekomster, inaktiv navigation #C79AAA → --paa-moerk-label 10 forekomster, versal-label i sidebjælken #F7E9E5 → (udgået, se A) 8 forekomster #D8CDD3 → --flade-daempet-2 6 forekomster #6B4356 → --tekst-sekundaer 5 forekomster; 8,20:1 mod hvid, samme familie som --dk-graa-600 #C98E80 → (udgået, se A) 5 forekomster #FDF9FB → --flade-hvid-varm 5 forekomster #EFE9EC → --kant-dekorativ-svag 5 forekomster, border-bottom #7A2B3D → --knap-deaktiveret-tekst 4 forekomster #F4EFF2 → --flade-rolig 3 forekomster #F0DCE3 → --paa-moerk-tekst-sekundaer 2 forekomster #E8CFD8 → --paa-moerk-tekst-svag 2 forekomster #8FE0B4 → --paa-moerk-succes 2 forekomster #295C60 → --tone-muted-tekst 2 forekomster; var --pay-refunderet, nu tone-muted (S9 §2.8) #E4EFF0 → --tone-muted-flade 1 forekomst, flade under --pay-refunderet #B7D3D6 → --tone-muted-kant 1 forekomst, kant under --pay-refunderet #7C1926 → --knap-destruktiv-hover 1 forekomst #E5C4BB → (udgået, se A) 1 forekomst #F3E2E8 → --paa-moerk-kode 1 forekomst #1A1F71 → --brand-visa 1 forekomst, kortordningens eget mærke #EB001B → --brand-mastercard 1 forekomst, kortordningens eget mærke #5A78FF → --brand-mobilepay 1 forekomst, kortordningens eget mærke #FFF → --dk-hvid 373 forekomster i kort form; normaliseres til #FFFFFF C. RETTET — ny værdi, fordi den gamle ikke bestod -------------------------------------------------------------------------- #C9BEC5 → --kant-ui #947E8C feltramme: 1,80:1 → 3,74:1 mod hvid #E4DCE0 → --kant-ui #947E8C hårkant om interaktivt: 1,35:1 → 3,74:1 --kant-dekorativ #E4DCE0 bevaret som ren skillelinje, 1,35:1, uden information #E4003C → --dk-roed-dyb #B80031 som LINK og lille tekst: 4,34:1 → 6,14:1 mod grå-25 --dk-roed #E4003C bevaret som KNAPFLADE med hvid tekst, 4,81:1 #9C8A93 → --tekst-deaktiveret #845C6D kalender «lukkedag»: 2,93:1 → 5,07:1 mod grå-25 #C0B2B9 → --tekst-deaktiveret #845C6D kalender deaktiveret dag: 2,04:1 → 5,63:1 mod hvid #8C6274 → --tekst-daempet #845C6D dæmpet tekst: 4,12:1 → 4,54:1 mod sand #C7D6DE, #E3CDA4, #C3CCE4, #B9D4C6, #DCC3D8, #E7BCC3, #D2CBCF → tone-*-kant de otte badgekanter, se afsnit 9 rgba(255,255,255,.12/.14/.18/.22) → --kant-ui-paa-moerk .39 komponentgrænse på mørk flade, 1,34–1,87:1 → 3,30:1 D. UDFASEDE ALIAS — holder designleverancens danske navne i live -------------------------------------------------------------------------- Brug dem ikke i ny kode. De fjernes, når alle tre frontends er migreret. ============================================================================= */ :root { --status-modtaget: var(--tone-neutral-tekst); /* UDFASET → data-booking-status="received" */ --status-modtaget-flade: var(--tone-neutral-flade); --status-modtaget-kant: var(--tone-neutral-kant); --status-afventer: var(--tone-waiting-tekst); /* UDFASET → data-booking-status="awaiting" */ --status-afventer-flade: var(--tone-waiting-flade); --status-afventer-kant: var(--tone-waiting-kant); --status-tildelt: var(--tone-progress-tekst); /* UDFASET → data-booking-status="assigned" */ --status-tildelt-flade: var(--tone-progress-flade); --status-tildelt-kant: var(--tone-progress-kant); --status-bekraeftet: var(--tone-success-tekst); /* UDFASET → data-booking-status="confirmed" */ --status-bekraeftet-flade: var(--tone-success-flade); --status-bekraeftet-kant: var(--tone-success-kant); --status-aendret: var(--tone-attention-tekst); /* UDFASET → data-booking-status="changed" */ --status-aendret-flade: var(--tone-attention-flade); --status-aendret-kant: var(--tone-attention-kant); --status-afvist: var(--tone-critical-tekst); /* UDFASET → data-booking-status="rejected" */ --status-afvist-flade: var(--tone-critical-flade); --status-afvist-kant: var(--tone-critical-kant); --status-aflyst: var(--tone-critical-tekst); /* UDFASET → data-booking-status="cancelled" */ --status-aflyst-flade: var(--tone-critical-flade); --status-aflyst-kant: var(--tone-critical-kant); --status-afsluttet: var(--tone-muted-tekst); /* UDFASET → data-booking-status="completed" */ --status-afsluttet-flade: var(--tone-muted-flade); --status-afsluttet-kant: var(--tone-muted-kant); /* UDFASET: designets betalings- og aktørsvarsnavne */ --pay-afventer: var(--pay-pending); /* → data-payment-status="pending" */ --pay-betalt: var(--pay-completed); /* → data-payment-status="completed" */ --pay-annulleret: var(--pay-cancelled); /* → data-payment-status="cancelled" */ --pay-refunderet: var(--pay-refunded); /* → data-payment-status="refunded" */ --svar-ja: var(--svar-yes); --svar-nej: var(--svar-no); --svar-afventer: var(--svar-pending); --svar-manglende: var(--svar-missing); } /* ============================================================================= 22. KOMPONENTKLASSER — det minimum, tokenlaget skal levere for at være brugbart ============================================================================= Ikke et komponentbibliotek. Kun de regler, hvor en frontend-agent ellers ville vælge en farve eller en kant på egen hånd og bryde kontrastkravet. ============================================================================= */ /* --- 22.1 Statusbadge (KR-D-021, KR-D-022, KR-SY-021) ---------------------- */ .badge { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) 10px; border-radius: var(--radius-1); font: var(--type-broed-s); font-weight: 600; color: var(--tone-tekst, var(--tone-neutral-tekst)); background: var(--tone-flade, var(--tone-neutral-flade)); border: 1px solid var(--tone-kant, var(--tone-neutral-kant)); } /* Ikonet er obligatorisk. Farve må aldrig stå alene (KR-D-022, KR-SY-021). Ikonet arver tekstfarven og har derfor samme målte kontrast som teksten. */ .badge > .badge__ikon { flex: none; width: 1em; height: 1em; fill: currentColor; } /* Skærmlæsere skal have hele betydningen, ikke kun labelen. */ .badge > .badge__tekst { white-space: nowrap; } /* --- 22.2 Formularfelt (KR-D-017–020, S8 §2.5) ----------------------------- */ .felt { font: var(--type-broed-m); color: var(--tekst-primaer); background: var(--dk-hvid); border: 1px solid var(--kant-felt); /* 3,74:1 mod hvid — består 1.4.11 */ border-radius: var(--radius-0); padding: var(--sp-3) var(--sp-4); min-height: var(--min-maalflade); width: 100%; } .felt::placeholder { color: var(--tekst-daempet); } /* 5,63:1 mod hvid */ .felt[aria-invalid="true"] { border-color: var(--kant-felt-fejl); border-width: 2px; } .felt[disabled], .felt[aria-disabled="true"] { color: var(--tekst-deaktiveret); background: var(--dk-graa-25); border-style: dashed; /* tilstanden bæres af mønster, ikke farve */ } .felt-fejltekst { font: var(--type-broed-s); color: var(--tekst-fejl); } /* 6,81:1 mod hvid */ /* Bindende markup — se korrektionsnotatets afsnit 6:

…

*/ /* --- 22.3 Fokus — gælder ALLE fokuserbare elementer ------------------------ */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: var(--fokus-lys); outline-offset: var(--fokus-offset); } /* Mørke flader. Designleverancen definerede --fokus-moerk, men anvendte den 0 gange og viste ingen fokustilstand på bordeaux. Her er den bundet. Sæt .paa-moerk på enhver container med bordeaux-baggrund. */ .paa-moerk :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: var(--fokus-moerk); outline-offset: var(--fokus-offset); } .paa-moerk { color: var(--paa-moerk-tekst); } .paa-moerk .felt { border-color: var(--kant-ui-paa-moerk); } /* --- 22.4 Trinindikator (KR-D-011, KR-SY-020, S8 §3.2) --------------------- */ /* aria-current="step" på det aktive trin er OBLIGATORISK — designleverancen har 0 forekomster af aria-current. Tilstanden skal desuden bæres af tekst og ikon, ikke af farve alene. */ .trin[aria-current="step"] { color: var(--tekst-primaer); font-weight: 700; border-bottom: 2px solid var(--kant-markant); } .trin[data-trin-tilstand="done"] { color: var(--tone-success-tekst); } .trin[data-trin-tilstand="pending"] { color: var(--tekst-daempet); } /* 5,63:1 — ikke #C0B2B9 */ .trin[data-trin-tilstand="failed"] { color: var(--tone-critical-tekst); } /* --- 22.5 Kalendercelle (S8 §6.4, KR-D-023) -------------------------------- */ .kalendercelle { min-width: var(--min-maalflade); min-height: var(--min-maalflade); font: var(--type-broed-m); font-variant-numeric: var(--tabular); color: var(--tekst-primaer); background: var(--dk-hvid); border: 1px solid var(--kant-ui); } .kalendercelle[aria-disabled="true"], .kalendercelle[data-tilstand="closed"] { color: var(--tekst-deaktiveret); /* RETTET fra #C0B2B9 (2,04:1) og #9C8A93 (2,93:1) */ background: var(--dk-graa-25); border-style: dashed; border-color: var(--kant-dekorativ); } .kalendercelle[data-tilstand="blocked"] { background: repeating-linear-gradient(135deg, var(--tone-muted-flade), var(--tone-muted-flade) 5px, var(--kant-skravering) 5px, var(--kant-skravering) 10px); border-color: var(--tone-muted-kant); } /* --- 22.6 Timer til 30-minutters reservationen (KR-K-018, S8 §9.5) --------- */ /* aria-live er OBLIGATORISK. Designleverancen har 0 forekomster. role="timer" alene annoncerer ikke; brug aria-live="polite" og skift til "assertive", når --reservation-advarsel-minutter er nået. */ .reservationstimer { font-variant-numeric: var(--tabular); color: var(--tekst-primaer); } .reservationstimer[data-advarsel="true"] { color: var(--tone-critical-tekst); font-weight: 700; } /* --- 22.7 Kun for skærmlæsere --------------------------------------------- */ .kun-skaermlaeser { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --- 22.8 Reduceret bevægelse --------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ============================================================================= 23. BRYDEPUNKTERNE SOM FAKTISKE @MEDIA-REGLER ============================================================================= Skabelonen frontend-agenter skal kopiere. Pixelværdierne er literale, fordi var() ikke virker i en @media-forespørgsel; de skal holdes synkrone med --bp-* i afsnit 14 gennem tokens.ts-eksporten. ============================================================================= */ /* mobil = base, ingen forespørgsel */ @media (min-width: 600px) { :root { --brydepunkt: tablet; } } @media (min-width: 1024px) { :root { --brydepunkt: desktop; } } @media (min-width: 1440px) { :root { --brydepunkt: bred; } } /* ============================================================================= 24. AFVIGELSE TIL MUSEETS GODKENDELSE — MED KORREKTE TAL ============================================================================= Designleverancens afvigelsesnote angav to forkerte tal. De rettede tal nedenfor er beregnet med WCAG 2.1's formel og er dem, museet skal godkende på. Farvepar designets påstand faktisk målt --------------------------------------------------------------------- #E4003C på #FFFFFF 6,4:1 4,81:1 #B80031 på #FFFFFF 7,3:1 6,81:1 Hvad afvigelsen faktisk er: Domkirkekvarterets #E4003C måler 4,81:1 mod hvid. Den består altså 4,5:1 som knapflade med hvid tekst og som brødtekst direkte på hvid — men kun dér. På sidebaggrunden #F6F2F4 falder den til 4,34:1 og på sandfladen #ECE5E8 til 3,88:1; begge er under 4,5:1 og dur derfor ikke til link, lille tekst eller ikon. Derfor er #B80031 indført til rød tekst, røde ikoner og røde fokusrammer: 6,81:1 mod hvid, 6,14:1 mod #F6F2F4 og 5,50:1 mod #ECE5E8. Rød som FLADE er uændret. Ingen brandfarve er udskiftet; der er tilføjet én mørkere nuance af den samme røde til tekstrollen, præcis som design- briefens punkt 2.9 foreskriver. ============================================================================= */ /* ============================================================================= LAG 2 — KOMPONENTLAGET (E12-S02, «Designsystemet i kode») ============================================================================= ALT OVENFOR denne linje er `spec/12-designtokens.css`, ORDRET og uændret. Prøven `test/tokenlaget.test.ts` sammenligner byte for byte og bliver rød, hvis ét tegn i lag 1 flyttes. Skal en VÆRDI ændres, ændres den i spec/12 — og først efter at kontrastforholdet er genberegnet og det målte tal skrevet i kommentaren (spec/13 afsnit 7). ALT HERUNDER er ADDITIVT og indfører: · ingen ny farve — hver farve er en var() fra lag 1 · ingen hex-værdi — håndhævet af `test/tokenlaget.test.ts` · ingen ny kontrastpåstand — de målte tal står i lag 1 og efterprøves af `test/a11y/kontrast.test.ts`, der REGNER dem ud af WCAG 2.1's formel i stedet for at tro på dem Hvorfor lag 2 ligger i SAMME fil som lag 1: E12-S01's kildeliste (`hubspot/theme/src/kilder.ts`) kopierer ÉN fil ind i temaet. Lå komponent- laget ved siden af, ville temaet få tokens uden komponenter, og de tre frontends ville ikke længere dele det samme udtryk (accept 1). ============================================================================= */ /* ============================================================================= 25. TO TÆTHEDER (KR-D-002, E12-S02 accept 4) ============================================================================= Ikke to komponentsæt — ÉN mekanisme. Hver komponent læser de samme otte variabler, og tætheden sættes af en forfader:
kunde- og aktørvendt: handlingsorienteret
administrativt: flere detaljer pr. skærm Tallene er designleverancens egne, aflæst i komponentbiblioteket: «Højde 48 px kundevendt · 36 px i cockpittet · aldrig under 44 px på mobil». DEN SIDSTE HALVSÆTNING ER REGLEN, IKKE EN NOTE. Basislaget er mobil (KR-D-029), og dér er BEGGE tætheder mindst --min-maalflade (44px). Først fra tablet og op må den tætte variant gå ned på 36px — dér er der en mus. Derfor findes 36-tallet kun inde i @media-blokken i afsnit 34. `--taethed-navn` er ikke dekoration: den lader en prøve og en udvikler læse den beregnede tæthed ud af DOM'en i stedet for at gætte på klassenavne. `--kontrol-hoejde` ER DEN ENE HØJDE, ALLE KONTROLFORMER LÆSER (QA-fund 21, 30/8). Målt live på 1388px stod fem sideordnede kontroller i fem højder — vælger 44,0px, tekstfelt 51,6, datofelt 53,6, antalfelt 52,8, knap 48 — med SAMME polstring og SAMME skriftstørrelse. Forskellen kom hverken fra tokens eller fra skærmene, men fra hver kontrolforms egen indre højde: `` bærer en højere skyggekontrol end `type=text`, og antalfeltets 18px-tal er 3,2px højere end tekstfeltets 16px. Sat op ad hinanden — katalogets filterrække, checkoutens leveringsvælger — springer underkanterne 9,6px. HØJDEN KAN DERFOR IKKE OVERLADES TIL POLSTRINGEN. Hver kontrolform får en EKSPLICIT `height` fra dette ene token, og den lodrette polstring skrives til 0: browseren centrerer selv en enkeltlinjekontrols indhold i sin højde, og så er indholdets egen linjehøjde ikke længere med til at bestemme den ydre. Vandret polstring og alt andet er uændret. TALLET ER TÆTHEDENS EGET og ikke et nyt: `--taethed-hoejde` bærer allerede designleverancens «48 px kundevendt · 36 px i cockpittet · aldrig under 44 px på mobil», og knappen har stået på det hele tiden — det er de fire ANDRE former, der aldrig spurgte. Tokenet er derfor et ALIAS med et navn, der siger, hvad det er til: det kan ikke skride fra knappens højde, og en kontrolform, der senere vil have sin egen, skal ændre navnet og dermed forklare sig. --------------------------------------------------------------------------- */ :root, [data-taethed="enkel"] { --taethed-navn: enkel; --taethed-hoejde: 48px; /* designleverancens kundevendte knaphøjde */ --taethed-hoejde-min: var(--min-maalflade); --kontrol-hoejde: var(--taethed-hoejde); --kontrol-hoejde-min: var(--taethed-hoejde-min); --taethed-pad-y: var(--sp-3); /* 12px */ --taethed-pad-x: var(--sp-5); /* 24px */ --taethed-gab: var(--sp-3); --taethed-raekke: var(--min-maalflade); --taethed-tekst: var(--type-broed-m); --taethed-tekst-lille: var(--type-broed-s); } [data-taethed="taet"] { --taethed-navn: taet; /* MOBIL (basislaget): den tætte variant er lige så stor som den enkle. En administrator med en telefon i hånden har samme fingre som en kunde. */ --taethed-hoejde: var(--min-maalflade); --taethed-hoejde-min: var(--min-maalflade); --kontrol-hoejde: var(--taethed-hoejde); --kontrol-hoejde-min: var(--taethed-hoejde-min); --taethed-pad-y: var(--sp-2); /* 8px */ --taethed-pad-x: var(--sp-4); /* 16px */ --taethed-gab: var(--sp-2); --taethed-raekke: var(--min-maalflade); --taethed-tekst: var(--type-broed-s); --taethed-tekst-lille: var(--type-label); } /* ============================================================================= 26. KNAPPER — seks roller, fem tilstande (KR-D-003, KR-D-009, KR-D-012) ============================================================================= Rollerne er designleverancens egne fire plus konturvarianten af den destruktive. Tilstandene er de fem, komponentbiblioteket viser: standard, hover, fokus, deaktiveret og «i gang». MÅLTE FORHOLD (alle fra lag 1, ingen nye): primær standard hvid på --knap-primaer-flade 4,81:1 primær hover hvid på --knap-primaer-flade-hover 6,81:1 sekundær hvid på --knap-sekundaer-flade 16,57:1 sekundær hover hvid på --dk-bordeaux-dyb 18,68:1 kontur --tekst-primaer på hvid 16,57:1 · kant 16,57:1 tekstknap --knap-tekst-farve på hvid 6,81:1 destruktiv hvid på --knap-destruktiv-flade 8,13:1 destruktiv hover hvid på --knap-destruktiv-hover 10,38:1 destruktiv kontur --tekst-destruktiv på hvid 8,13:1 · kant 8,13:1 deaktiveret --knap-deaktiveret-tekst på flade 5,85:1 --------------------------------------------------------------------------- */ /* `text-decoration: none` HØRER TIL I BASEN OG IKKE HOS DEN ENKELTE SKÆRM (K2's aflevering fund 1). En knap kan være et `