/* * tokens.css – designtokens * ───────────────────────── * Hämtad ordagrant från Nuxt-prototypen (frihetsfronten-Mosa, * assets/css/tokens.css). Ändra helst HÄR och inte i de gamla filerna: * theme.css mappar de äldre variabelnamnen (--bg, --muted, --radius-sm …) * mot tokens nedan, så resten av sajten ärver paletten automatiskt. * * Originalkommentaren följer och är värd att läsa – varje färg har en * motiverad roll, och kontrastvärdena är räknade, inte uppskattade. */ /* * Frihetsfronten – designtokens * ───────────────────────────── * Tesen: LJUS, INTE PAPPER. * * Myrstack pressar ner saker i papper. Den här sajten gör tvärtom – den * öppnar upp mot ljus. Materialet är inte ett dokument utan ett rum i * gryningen: luft, horisont, och en bestämd riktning på ljuset. * * Varför: organisationen heter Frihetsfronten, grundades 1990 ur piratradio * och civil olydnad, och märket är en pil som pekar upp och åt höger. * Upplysning betyder bokstavligen att något lyses upp. Ljuset ÄR metaforen – * den är både ideologiskt sann och framåtriktad, till skillnad från * pamflett-nostalgi som hade låst sajten i 1990. * * LJUSRIKTNING: uppifrån höger, samma väg som pilen pekar. Alla ytors * gradienter ljusnar mot övre höger, alla skuggor faller mot nedre vänster. * Detta motsägs aldrig någonstans – det är vad som får ytorna att kännas * som samma fysiska rum. * * Sex färger, precis som Myrstack har sex bläck. Varje färg har ett ursprung * och en roll den aldrig bryter mot. * * Alla kontrastvärden nedan är RÄKNADE, inte uppskattade. * Kör `pnpm contrast` efter varje ändring. */ :root { /* ── Ytor ────────────────────────────────────────────────────────── * Gryning är sval och nästan omärkligt grön – den delar ton med Fjärd, * vilket gör att petrolen ser ut att höra hemma på sidan i stället för * att ligga ovanpå den. Medvetet INTE varm kräm: det är Myrstacks och * Omstart Sveriges register, och den här sajten ska inte se ut som * någon av dem. */ --gryning: #F3F5F2; /* sidans grund */ --ljus: #FBFCFA; /* upphöjd yta – kort, paneler */ /* ── Bläck ──────────────────────────────────────────────────────── * Aldrig ren svart. Skiffer har petrolton i sig, så mörka band känns * som djupare skugga i samma rum snarare än som ett hål i sidan. * Detta är också vad som räddar oss från den syndikalistiska läsningen: * rött mot svart betyder en sak, rött mot skiffer och gryning en annan. */ --skiffer: #14211F; /* ── Primär ─────────────────────────────────────────────────────── * Fjärd = petrol/teal. Vald för att den är liberal utan att vara * partifärg: inget svenskt parti äger den, den läser modernt, och den * undviker både socialistiskt rött och blågult. 5,87:1 mot Gryning – * duger som brödtext, inte bara som dekor. */ --fjard: #0E6A63; --fjard-djup: #0A4F4A; /* hover/aktiv – mörkare, aldrig ljusare */ /* Djupt petrol för STORA PLAN. Ersätter det nästan-svarta bandet: bärnsten * på svart läser gammaldags (guld-på-svart är 90-talets premiumklyscha), * bärnsten på djupt petrol läser samtida. * * Valet är också räknat, inte smak: Fyr på Fjärd ger bara 2,95:1 och faller * som text. På #073B38 ger samma bärnsten 5,69:1 och klarar AA – utan att * behöva tvättas ur till en blek sandton. Det är därför den här färgen * finns. */ --fjard-natt: #073B38; /* ── Accent ─────────────────────────────────────────────────────── * Fyr = bärnsten, "ljuset". Frihetens färg (Gadsden, LP-guldet, * europeisk liberalism). * * ⚠️ HÅRD REGEL: Fyr klarar 1,99:1 mot Gryning. Den kan ALDRIG vara * text på ljus botten. Den är fyllning, ljus och markör – aldrig * bokstäver. Skiffer på Fyr ger 7,60:1 och är rätt väg när accenten * ska bära text. På Skiffer ger Fyr 7,60:1 och får då vara text. */ --fyr: #E9A13B; --fyr-djup: #C9832A; /* hover på fyllda fyr-ytor */ /* ── Arv ────────────────────────────────────────────────────────── * Logotypens röda, samplad ur FFred_hr.jpg. Bor ENDAST i märket. * 35 års igenkänning ligger i pilens form, inte i att rödan används * över hela sajten – och rött som sajtfärg hade dragit mot syndikalism. * Här är den en enda glöd, inte en ton. */ --arv: #BE1A21; /* ── Skymning ───────────────────────────────────────────────────── * Viol. Namnet hör ihop med Gryning – gryning och skymning, samma ljus * från två håll. Teal, bärnsten och viol är dessutom en fungerande triad, * så den bråkar inte med paletten. * * ROLLEN ÄR SMAL MED FLIT: Skymning markerar **Nyliberalen** och inget * annat. Tidskriften är en egen enhet – egen redaktör, egen sajt, utgiven * sedan 1983 – och en färg som bara dyker upp där publikationen dyker upp * är sällsynt av konstruktion, inte av disciplin. * * En färg utan roll är dekor, och dekor utan funktion är precis det som * gör system billiga. Hittar du på ett nytt ställe att använda Skymning * på: låt bli. * * GRÄNS: 5,97:1 mot Gryning (text OK), 6,36:1 med Ljus på sig (plan OK), * men bara 1,90:1 mot Fjärd natt. Skymning får ALDRIG ligga på det mörka * planet. */ --skymning: #6B4E9E; /* Nyliberalens egen lila, hämtad från nyliberalen.nu. Tanken var att låna * den rakt av för att göra kopplingen till tidskriften tydligare. * * Den GÅR INTE att använda som färg med text: 4,02:1 som text på Gryning, * 4,28:1 med ljus text på sig, 3,76:1 med mörk text på sig — den ligger * precis i det luminansspann där varken ljust eller mörkt klarar AA. * * Så den lever här i stället: som ren DEKORATION i Nyliberalen-planet, ett * ljus i hörnet som aldrig bär information. Kopplingen finns, kontrasten * håller. Sätt aldrig text i den här färgen och lägg aldrig text på den. */ --skymning-ljus: #8C52FF; /* ── Text-tiers ─────────────────────────────────────────────────── * Opaciteter valda ur faktisk kontrastmätning mot Gryning, inte på * känsla. Myrstack-lärdomen: 0.55 såg bra ut men föll på 3,69:1. * text 1.00 → 15,12:1 (AAA) * text-mate 0.68 → 5,49:1 (AA brödtext) * text-svag 0.48 → 3,01:1 (AA ENDAST stor text ≥18px * eller spärrade versaler) * text-spar 0.10 → dekorativa hårstreck, aldrig text */ --text: var(--skiffer); --text-matt: rgba(20, 33, 31, 0.68); --text-svag: rgba(20, 33, 31, 0.48); --text-spar: rgba(20, 33, 31, 0.10); /* ── Skugga ────────────────────────────────────────────────────── * Enda kvarvarande ljuseffekten, och bara på det neutrala kortet. * * Gradienttokens och hårstrecksfärger fanns här i v1 och är borttagna: * de producerade exakt den grå försiktighet som dömdes ut. Ytor är nu * fylld färg, och färg skiljer i stället för linjer. Lämnar man döda * tokens kvar kryper de tillbaka in i koden. */ --skugga: -1px 2px 4px rgba(20, 33, 31, 0.06); /* ── Rörelse ───────────────────────────────────────────────────── * Ett rörelsespråk. Allt som rör sig går framåt eller uppåt – samma * riktning som pilen. Ingen studs, ingen skalning från mitten. */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --snabb: 0.15s; --normal: 0.25s; --lugn: 0.4s; /* ── Korn ──────────────────────────────────────────────────────── * feTurbulence avmättat till gråskala, som data-URI. Ligger här som token * så att kornets karaktär (baseFrequency) ändras på ETT ställe – det är * frekvensen som avgör om det läser som tryck eller som TV-brus. * 0.82 ger ett fint offsetkorn; under 0.5 blir det moln, över 1.2 blir * det digitalt snö. Se textur.css för hur det används. */ --korn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23k)'/%3E%3C/svg%3E"); /* Mjukt korn – samma brus men med hoptryckt tonomfång (feComponentTransfer, * slope 0.34 kring mitten) så att det ligger nära 50 % grått i stället för * att svänga mellan svart och vitt. * * Finns för TEXT. Det fulla kornet i bokstäver drar hela bokstaven mot grått * – man får en grå brusig färg i stället för en färgad bokstav med brus i. * Skillnaden är hela poängen: bruset ska knacka i ytan, inte byta ut den. */ --korn-mjukt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.34' intercept='0.33'/%3E%3CfeFuncG type='linear' slope='0.34' intercept='0.33'/%3E%3CfeFuncB type='linear' slope='0.34' intercept='0.33'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23m)'/%3E%3C/svg%3E"); /* ── Form ──────────────────────────────────────────────────────── * TVÅ NIVÅER, och skillnaden är betydelsebärande: * * --radie-plan (4px) TRYCKT. Plan, fält, datumblock. Nästan raka hörn, * som en trycksak. En affisch har inga alls. * --radie-mjuk (10px) GREPPBART. Knappar, porträtt, bilder – sådant man * trycker på eller tittar in i. * * Poängen är att ytorna känns tryckta medan det man rör vid känns fysiskt. * Samma radie överallt var det som gjorde första utkastet generiskt: 10px * på allt är varenda sitebuilder, 2px på allt blir stelt. * Inga piller, aldrig. */ --radie-plan: 4px; --radie-mjuk: 10px; /* ── Typografi ─────────────────────────────────────────────────── * Schibsted Grotesk för allt som är gränssnitt: nordisk, variabel, * ritad för skärm, samtida utan maner. Newsreader ENBART inne i * idébiblioteket – en modern läseserif. Tänkarporträttet om Nozick är * 4 494 ord och behöver riktig lästypografi. * * Arbetsdelningen är hela poängen: serifen signalerar "nu läser du på * riktigt" utan att sajten byter identitet. */ --font-ui: 'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif; --font-lasa: 'Newsreader', Georgia, serif; /* Läskolumn. 66 tecken är den beprövade övre gränsen för löptext. */ --matt-las: 34rem; --matt-sida: 72rem; }