/* ============================================================================= Annot — komponent-token-lager ============================================================================= Lager, uppifrån och ned: tokens/ primitiva + semantiska tokens från @instinctly/ui. Synkas med `node scripts/sync-tokens.mjs`. Redigera aldrig. theme.css DEN HÄR FILEN. Annot-specifik semantik ovanpå design-systemet, plus mått som bara finns här (verktygsfält, paneler, canvas). app.css skalet canvas.css canvasen comments.css kommentarspanelen Regeln från @instinctly/ui gäller här: aldrig hex eller rgb i en komponent. Behövs en ny färg definieras den här, härledd ur en DS-token. ========================================================================== */ @import "./tokens/index.css"; /* ------------------------------------------------------------------- teman Tre lägen, inte två: ljust, mörkt och system. System är ett **eget, uttryckligt** val, inte frånvaron av ett val. Skillnaden spelar roll: utan den vinner ett mörkt operativsystem över en användare som aktivt valt ljust. @instinctly/ui växlar på klass (`.theme-light` / `.theme-dark` på ) och har ljust som standard. Annot sätter klassen från en liten skriptsnutt i innan första målningen, utifrån sparat val och `prefers-color-scheme`. Därför behövs ingen duplicerad palett här — bara en regel för att canvasen ska följa med. Standardläget är **system**. Det är bestämt nu, innan verktyget har fler användare än Daniel, eftersom ett byte senare lämnar kod som antar det gamla. */ :root { color-scheme: light; } .theme-dark { color-scheme: dark; } /* -------------------------------------------------------------- annot-semantik */ :root { /* Anteckningstyper. Bundna till DS:ens semantiska färger så att de följer med när paletten byts, och så att de betyder samma sak som överallt annars: problem är fara, möjlighet är framgång, fråga är information. */ --note-issue: var(--color-danger); --note-issue-soft: var(--color-danger-soft); --note-opportunity: var(--color-success); --note-opportunity-soft: var(--color-success-soft); --note-question: var(--color-info); --note-question-soft: var(--color-info-soft); --note-heuristic: var(--color-brand); --note-heuristic-soft: var(--color-brand-soft); /* Canvas-verktyg. Hjälplinjer och mått är verktygsfärger, inte innehåll — de ska sticka ut mot allt användaren ritat och därför inte bindas till paletten. Enda stället i annot där en färg får stå på egna ben. */ --canvas-guide: oklch(78% 0.14 195); /* cyan hjälplinje */ --canvas-measure: oklch(65% 0.24 330); /* magenta måttchip */ --canvas-grid: var(--color-line); --canvas-void: var(--color-bg); /* Pulsen när en pin lyfts fram. Längre än DS:ens skala eftersom den ska hinna uppfattas som en markering, inte som en övergång. Nollas nedan tillsammans med de andra så att den följer prefers-reduced-motion. */ --dur-pulse: 1200ms; /* Mått för skalet */ --bar-h: 52px; --nav-w: 250px; --side-w: 360px; --toolbar-w: 48px; --sheet-peek: 56px; /* Säkra zoner på iOS */ --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); } /* ------------------------------------------------- bakåtkompatibla alias canvas.css och comments.css skrevs mot egna, lokalt deklarerade namn innan design-systemet kom in. Aliasen nedan pekar om dem mot DS-tokens så att hela appen blir konsekvent direkt, utan att de filerna behöver röras samtidigt som de byggs om för touch. Två av dem var trasiga: comments.css använde --panel-2 och --danger, som ingen deklarerade. De föll tillbaka på ingenting. Ska bort när båda filerna är svepta till var(--color-*). */ :root { --bg: var(--color-bg); --panel: var(--color-surface); --panel2: var(--color-surface-2); --panel-2: var(--color-surface-2); /* var trasig */ --line: var(--color-line); --ink: var(--color-ink); --muted: var(--color-ink-muted); --faint: var(--color-faint); --accent: var(--color-accent); --bad: var(--color-danger); --danger: var(--color-danger); /* var trasig */ --ok: var(--color-success); --success: var(--color-success); --radius: var(--radius-lg); --guide: var(--canvas-guide); --measure: var(--canvas-measure); /* gamla layoutnamn */ --bar: var(--bar-h); --nav: var(--nav-w); --side: var(--side-w); } /* --------------------------------------------------------------- ytor Notion- och Apple-känslan sitter i ytorna, inte i dekorationen. Tre nivåer: grunden man aldrig rör, panelen som bär innehåll, och det som svävar. Skillnaden görs med ljushet och en hårfin linje, inte med tjocka ramar. */ .surface { background: var(--color-surface); border: 1px solid var(--color-line); } .surface-sunk { background: var(--color-bg); border: 1px solid var(--color-line); } .surface-rise { background: var(--color-surface-2); border: 1px solid var(--color-line); box-shadow: var(--shadow-md); } /* Overlay: allt som lägger sig ovanpå. Suddet gör att man ser att det finns innehåll under, vilket är hela poängen med en overlay i stället för en sida. OBS ordningen. Lightning CSS och flera andra minifierare behandlar -webkit-backdrop-filter och backdrop-filter med identiska värden som samma deklaration och behåller bara den sista. Ligger standarden sist överlever den. Vara-projektet tappade sin glasyta enbart i produktion på exakt det här, och felet syns inte i dev. Fallbacken nedan täcker webbläsare utan stöd, där en genomskinlig yta utan oskärpa blir oläslig. */ .overlay { background: color-mix(in oklch, var(--color-surface) 82%, transparent); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); border: 1px solid var(--color-line); box-shadow: var(--shadow-xl); } .scrim { background: color-mix(in oklch, var(--color-bg) 55%, transparent); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .overlay { background: var(--color-surface); } .scrim { background: color-mix(in oklch, var(--color-bg) 88%, transparent); } } /* ------------------------------------------------------ mikrointeraktioner Kort, och de ska kännas snarare än synas. Entré tonar in nedifrån, utgång bara tonar. Tryck ger en knappt märkbar nedskalning som gör att gränssnittet känns fysiskt utan att bli leksaksaktigt. */ .press { transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); } .press:active { transform: scale(0.97); } .lift { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .lift:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); } .fade-in { animation: annot-fade var(--dur-base) var(--ease-out) both; } .rise-in { animation: annot-rise var(--dur-slow) var(--ease-out) both; } @keyframes annot-fade { from { opacity: 0 } to { opacity: 1 } } @keyframes annot-rise { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } } /* Fokus: en enda ring i hela appen, aldrig borttagen, bara flyttad till :focus-visible så att muspekaren slipper den. */ :where(button, a, input, textarea, select, [tabindex]):focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm); } @media (prefers-reduced-motion: reduce) { :root { --dur-pulse: var(--dur-instant); } .press:active, .lift:hover { transform: none; } .fade-in, .rise-in { animation: none; } } /* ----------------------------------------------------------- progressiv yta Hellre vika ut än att visa allt. `.disclosure` döljer innehåll bakom en rad som går att öppna, och `[data-peek]` visar en antydan om vad som finns där utan att ta plats. Används i stället för fler ikoner i verktygsfältet. */ .disclosure > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--color-ink-muted); transition: background-color var(--dur-fast) var(--ease-out); } .disclosure > summary::-webkit-details-marker { display: none; } .disclosure > summary:hover { background: var(--color-surface-2); color: var(--color-ink); } .disclosure > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--dur-base) var(--ease-out); } .disclosure[open] > summary::before { transform: rotate(45deg); } .disclosure[open] > :not(summary) { animation: annot-rise var(--dur-base) var(--ease-out) both; }