/* ============================================================================= Partnerportalens designtokens ============================================================================= Värdena anges i två format, och skillnaden är inte godtycklig: RGB-kanaler ("107 33 168") för färger som behöver opacitetsvarianter. Tailwind bygger rgb(var(--x) / ), så bg-brand-800/50 fungerar. Färdiga rgba-strängar för ytor och linjer där alfat ÄR värdet. En glasyta är 8 % vitt — det är inte en variant av något, det är vad den är. PALETTEN FINNS PÅ TVÅ STÄLLEN. Här, och i PartnerTheme.cs som matar MudBlazor. MudBlazor tar emot strängar och kan inte läsa CSS-variabler, så dubbleringen går inte att undvika. Ändras en färg här måste den ändras där. --------------------------------------------------------------------------- TRE KANALER, INTE TVÅ Handling, uppmärksamhet och tillhörighet är skilda saker och får skilda färger: Handling lila, överallt, alltid samma. Knappar, primära länkar. Uppmärksamhet gult. Hovrade rubriker, aktuellt steg, fokusringen. Det som säger "här är du" eller "titta hit" — aldrig något man klickar. Tillhörighet gult-varmt för goda grannar, lila-tonat för matställen. Bor i ytor: kort, infoboxar, sektioner. Poängen är att ingen ska behöva lära sig att en gul yta gör något annat än en lila. Man klickar på handlingar, man läser ytor, och man tittar dit det gula pekar. Gult som uppmärksamhetsfärg är hämtat ur huvudsajten, där #fde047 är accenten på mörkt och gör exakt det här jobbet. Goda grannars guld (#ffb300–#ffca28) är en annan färg med ett annat uppdrag och blandas inte in. Grönt finns inte längre. Det var det gamla matställespårets färg, och när onboardingen blev ett enda flöde blev det en tredje varumärkesfärg utan uppgift. ============================================================================= */ :root { /* --- Lila: varumärke och handling ------------------------------------- */ --pp-brand-50: 250 245 255; --pp-brand-100: 243 232 255; --pp-brand-200: 233 213 255; --pp-brand-300: 216 180 254; --pp-brand-400: 192 132 252; --pp-brand-500: 168 85 247; --pp-brand-600: 147 51 234; --pp-brand-700: 126 34 206; --pp-brand-800: 107 33 168; /* #6b21a8 — huvudsajtens lila */ --pp-brand-900: 88 28 135; /* #581c87 */ --pp-brand-950: 59 7 100; /* --- Gult: goda grannar ------------------------------------------------ */ --pp-neighbour-50: 254 252 232; --pp-neighbour-100: 254 249 195; --pp-neighbour-200: 254 240 138; --pp-neighbour-300: 253 224 71; --pp-neighbour-400: 250 204 21; /* #facc15 — huvudsajtens gula */ --pp-neighbour-500: 234 179 8; --pp-neighbour-600: 202 138 4; --pp-neighbour-700: 161 98 7; --pp-neighbour-800: 133 77 14; --pp-neighbour-900: 113 63 18; /* --- Neutraler --------------------------------------------------------- */ --pp-ink-50: 249 250 251; --pp-ink-100: 243 244 246; --pp-ink-200: 229 231 235; --pp-ink-300: 209 213 219; --pp-ink-400: 156 163 175; --pp-ink-500: 107 114 128; --pp-ink-600: 75 85 99; --pp-ink-700: 55 65 81; --pp-ink-800: 31 41 55; --pp-ink-900: 17 24 39; /* --- Status ------------------------------------------------------------ Rött och bärnsten behålls — de betyder fel respektive varning och har inget med varumärket att göra. Grönt saknas här med flit: det fanns bara som spårfärg, aldrig som "lyckades". Bekräftelser bär lila i stället. */ --pp-danger-50: 254 242 242; --pp-danger-200: 254 202 202; --pp-danger-500: 239 68 68; --pp-danger-700: 185 28 28; --pp-warning-50: 255 251 235; --pp-warning-200: 253 230 138; --pp-warning-500: 245 158 11; --pp-warning-800: 146 64 14; /* --- Ytor: glas på levande duk ----------------------------------------- Papperet var en gång varmt vitt (#FFFEFA). Mot en rörlig lila bakgrund läser rent vitt som en pappersbit klistrad ovanpå — maximal kontrast, ingen samhörighet. Ytorna är genomskinligt ljusa i stället: de tar färg av duken under sig och lyfter genom att vara ljusare, inte genom att vara något annat. Alfavärdena är huvudsajtens, inte påhittade. Där ligger allt som svävar över gradienten eller ett foto på 5 % / 8 % / 14 % vitt, och linjerna på 10 % / 15 %. Portalen hade i stället 16 handplockade steg utspridda i markupen — /05, /07, /10, /12, /15, /18, /20, /25 — vilket är exakt varför fyra kort bredvid varandra läste som fyra olika material. DE HÄR SKA MARKUPEN ANVÄNDA. Skriver du white/[0.07] igen har du gjort ett sjuttonde steg. */ --pp-glass: rgba(255, 255, 255, 0.05); --pp-glass-strong: rgba(255, 255, 255, 0.08); --pp-glass-hover: rgba(255, 255, 255, 0.14); --pp-line-soft: rgba(255, 255, 255, 0.10); --pp-line-strong: rgba(255, 255, 255, 0.15); /* Ogenomskinligt vitt. Kvar för fältens inmatningsyta, som ska vara papper: det man skriver i får vara det enda på sidan som inte är genomskinligt. */ --pp-surface: 255 255 255; --pp-surface-raised: 255 255 255; --pp-surface-sunken: 0 0 0; /* --- Chrome: sidhuvud, sidfot, paneler --------------------------------- Det enda i portalen som inte är genomskinligt glas. Huvudsajten har tre nivåer marinblått och de är avsiktligt olika: sidhuvudet är den ljusaste, sidfoten den mörkaste, och panelerna däremellan. En sida som slutar mörkare än den börjar känns avslutad. Portalen körde tidigare Tailwinds gray-900 på BÅDA — sidhuvud och sidfot i exakt samma ton, alltså ingen nivåskillnad alls. Och gray-scalan är inte huvudsajtens: den drar mot neutralt grått medan chromet drar mot blått. */ --pp-chrome-header: 17 24 39; /* #111827 */ --pp-chrome-raised: 15 23 42; /* #0f172a — panelrader, sekundära ytor */ --pp-chrome-footer: 11 17 32; /* #0b1120 */ --pp-chrome-line: 30 41 59; /* #1e293b — hairline mellan chrome-ytor */ /* --- Text på mörkt ------------------------------------------------------ Tre nivåer, och de är riktiga nivåer nu. Tidigare pekade alla tre på rent vitt, vilket gjorde tokens meningslösa och tvingade varje komponent att välja sin egen opacitet för hand. */ --pp-fg: rgba(255, 255, 255, 1); --pp-fg-muted: rgba(255, 255, 255, 0.7); --pp-fg-faint: rgba(255, 255, 255, 0.4); /* --- Semantiska alias -------------------------------------------------- Det här är vad markupen helst ska använda. Byter vi handlingsfärg någon gång sker det på en rad, inte i 343. */ --pp-action: var(--pp-brand-800); --pp-action-hover: var(--pp-brand-900); --pp-action-soft: var(--pp-brand-50); --pp-action-contrast: 255 255 255; /* Uppmärksamhet. Gult på mörkt — huvudsajtens #fde047. ----------------------------------------------------------------------- Handlingsfärgen #6b21a8 är också ett av dukens fem gradientstopp, så en lila knapp står periodvis mot nästan sin egen färg. Det är accenten som löser det: kanten, det aktuella steget och fokusringen bär gult, och då syns knappen på formen även när färgen tar paus. Aldrig på något klickbart som primär yta — en gul knapp skulle konkurrera med den lila om vad "tryck här" betyder. */ --pp-accent: 253 224 71; /* #fde047 */ --pp-accent-ink: 41 26 3; /* mörk text på gult */ --pp-accent-ring: rgba(255, 216, 77, 0.6); /* Bekräftelse: bocken vid ett ifyllt fält, "numret ser bra ut". Lila enligt beslutet att grönt ska bort helt. Tycker du att bockarna blir sämre av det är det den här raden som ändras, inte de 45 ställena i markupen. TVÅ VÄRDEN, OCH DET ÄR INTE EN DUBBLETT. Bocken sitter INUTI fältet, alltså på vitt papper, och behöver då vara mörk. Bekräftelsetexten under fältet står på den mörka duken och behöver vara ljus. Samma betydelse, två underlag — ett enda värde gör den osynlig på det ena av dem. */ --pp-valid: var(--pp-brand-600); --pp-valid-soft: var(--pp-brand-400); --pp-valid-ink: var(--pp-brand-300); /* Tung yta med ljus text — uppmaningspaneler, "hör av dig"-rutor. */ --pp-panel: var(--pp-action); --pp-panel-ink: 255 255 255; --pp-panel-ink-muted: var(--pp-brand-200); /* Här låg --pp-text-strong, --pp-text, --pp-text-muted och --pp-line. Alla fyra stod på rent vitt utan alfa, alltså fyra namn för samma färg, och den sista användningen av dem — fältens ram i partner-forms.css — pekar numera på ett eget mörkt linjetoken. De ersätts av --pp-fg-familjen ovan. */ /* --- Form -------------------------------------------------------------- Rundningarna följer huvudsajten nu: kort 20px, stora paneler 32px, fält 14px. Portalen låg på 12–16px rakt igenom, vilket är den sortens skillnad man inte ser förrän man ser de två sajterna bredvid varandra — och då ser man inget annat. */ --pp-radius-sm: 0.625rem; /* 10px — brickor, små pillar */ --pp-radius: 0.875rem; /* 14px — fält och knappar */ --pp-radius-lg: 1.25rem; /* 20px — kort */ --pp-radius-xl: 2rem; /* 32px — flödets panel */ /* Skuggor. Två familjer, som på huvudsajten: neutralt djup för det som bara ska ligga ovanpå, och färgade sken för det som ska kännas laddat. Ett kort som lyfter får en LILA skugga, aldrig en svart — svart mot den mörka duken syns inte alls och gör lyftet till ingenting. */ --pp-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.16); --pp-shadow: 0 4px 12px rgb(0 0 0 / 0.22); --pp-shadow-lg: 0 15px 35px rgb(0 0 0 / 0.28); --pp-shadow-lift: 0 10px 25px rgba(124, 58, 237, 0.35); --pp-shadow-accent: 0 4px 14px rgba(253, 224, 71, 0.22); /* --- Rörelse ----------------------------------------------------------- Fyra kurvor, hämtade ur huvudsajten. Inget rör sig linjärt, och inget studsar vid inträde. */ --pp-ease-lift: cubic-bezier(0.25, 0.8, 0.25, 1); --pp-ease-overshoot: cubic-bezier(0.175, 0.885, 0.32, 1.275); --pp-ease-panel: cubic-bezier(0.16, 1, 0.3, 1); --pp-ease-field: cubic-bezier(0.4, 0, 0.2, 1); } /* ----------------------------------------------------------------------------- Fokus Gult, 3px, 4px offset — huvudsajtens ring, och den enda som syns mot både den mörka duken och ett vitt fält. MudBlazor ritar sina egna fokusmarkeringar inuti komponenterna; det här gäller allt annat, alltså knappar, kort och länkar som är skrivna för hand. :focus-visible, inte :focus. Musklick ska inte lämna en ring efter sig. -------------------------------------------------------------------------- */ .pp-canvas-content :focus-visible { outline: 3px solid var(--pp-accent-ring); outline-offset: 4px; } /* ----------------------------------------------------------------------------- Domänytor Sätts på en sektion eller ett kort, inte på enskilda element. Innanför dem pekar --pp-domain-* på rätt familj, så samma komponent kan återanvändas i båda sammanhangen utan att veta vilket den står i. --------------------------------------------------------------------------- VÄNDA MED DUKEN Ytorna var ljusa steg ur paletten — neighbour-50, brand-50 — från tiden då sidan var vit. Kvar på en mörk duk blev de gräddvita fläckar, och eftersom markupen samtidigt skrev text-white blev "Vi är en lokal verksamhet"-kortet vit text på nästan vitt papper. Det gick inte att läsa alls. Nu är de tonat glas: samma genomskinliga material som allt annat, men färgat av sin domän. Ett kort i lila sammanhang och ett i gult är då samma sorts sak i två kulörer, i stället för två olika material bredvid varandra. --pp-domain-ink vände med dem. Den är text OVANPÅ domänytan, och när ytan blev mörk måste texten bli ljus — annars flyttar man bara samma kontrastproblem ett steg. --pp-domain-accent-ink är något annat: text ovanpå den mättade accenten, och den kan inte härledas ur --pp-domain-ink. Gult 400 är en ljus accent som kräver mörk text; lila 800 är en mörk accent som kräver ljus. -------------------------------------------------------------------------- */ .pp-domain-neighbour { --pp-domain-gradient: radial-gradient(130% 130% at 0% 0%, #FFF8E1 0%, #FFE082 45%, #FFD54F 100%); --pp-domain-page: 255 253 240; --pp-domain-bg: rgba(255, 213, 79, 0.12); --pp-domain-soft: rgba(255, 213, 79, 0.20); --pp-domain-border: rgba(255, 213, 79, 0.32); --pp-domain-accent: var(--pp-neighbour-400); --pp-domain-accent-ink: 66 32 6; /* mörk text på gult */ --pp-domain-ink: #ffe082; } .pp-domain-eatery { --pp-domain-gradient: linear-gradient(135deg, #6b21a8 0%, #7c3aed 100%); --pp-domain-page: 248 245 255; --pp-domain-bg: rgba(168, 85, 247, 0.14); --pp-domain-soft: rgba(168, 85, 247, 0.22); --pp-domain-border: rgba(192, 132, 252, 0.34); --pp-domain-accent: var(--pp-brand-800); --pp-domain-accent-ink: 255 255 255; /* ljus text på lila */ --pp-domain-ink: #e9d5ff; } /* Flödet självt hör inte hemma i någon domän längre — det är ett enda flöde för båda partnertyperna, och riktningen väljs efter att kontot finns. */ .pp-domain-neutral { --pp-domain-gradient: none; --pp-domain-page: var(--pp-surface); --pp-domain-bg: var(--pp-glass); --pp-domain-soft: var(--pp-glass-strong); --pp-domain-border: var(--pp-line-strong); --pp-domain-accent: var(--pp-action); --pp-domain-accent-ink: 255 255 255; --pp-domain-ink: var(--pp-fg); } /* ----------------------------------------------------------------------------- Domänyta med toning Sätts på ett element inuti en .pp-domain-*. Faller tillbaka på den platta accentfärgen om domänen saknar toning — neutral har ingen, och ska inte ha det: flödet självt hör inte hemma i någon domän. -------------------------------------------------------------------------- */ .pp-domain-surface { background: var(--pp-domain-gradient, rgb(var(--pp-domain-accent))); /* Toningen är riktad, så en hovereffekt som byter bakgrund skulle radera den. Lyft ytan i stället — samma signal, utan att förstöra ljussättningen. */ transition: filter 200ms ease; } .group:hover .pp-domain-surface { filter: brightness(1.04); } /* ----------------------------------------------------------------------------- Inträde .animate-fade-in stod på över hundra ställen i portalen och gjorde ingenting: Tailwind känner bara till spin, ping, pulse och bounce, och ingen hade lagt till den här. Varje "animate-fade-in" var alltså en död klass, och allt poppade in utan övergång. Definitionen är huvudsajtens: 10px uppåt, ingen studs, panelkurvan. -------------------------------------------------------------------------- */ @keyframes ppFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .animate-fade-in { animation: ppFadeIn 400ms var(--pp-ease-panel) both; } /* Kontopanelen glider in från höger. Låg i Header.razors