/* GENERIERT aus /Users/jeremy/.claude/standards/design/tokens/primitives.css — nicht von Hand ändern. Neu holen: node /Users/jeremy/.claude/standards/design/scripts/install.mjs Global gültig. Lokale Abweichungen gehören NICHT hierher, sondern in eine eigene Datei daneben, die nach diesem Generat geladen wird. */ /* PRIMITIVES — die rohen Skalen. Interne Ebene. Komponenten referenzieren diese Tokens NIEMALS direkt, nur über semantic.css. Referenzrichtung strikt einseitig: primitives ← semantic ← Komponente. */ :root { /* ═══ TYPOGRAFIE ═══════════════════════════════════════════════════════ Leiter aus Radix Themes übernommen (Grösse + Zeilenhöhe als geprüftes Paar). Tailwind hat am unteren Ende identische Werte — zwei unabhängige Systeme, dieselbe Leiter. 20px und die Stufen über 35px sind bewusst nicht dabei: ungenutzt in der Messung, und jede zusätzliche Stufe kostet Disziplin. Zeilenhöhe und Laufweite gehören zur Stufe. Sie werden nie einzeln gewählt. */ /* Die Überschrift-Stufe. Kein Fliesstext — nur Versalien über einem Block: „STANDARDSTUFE", „MODULE", „MANDANT WECHSELN". Sie stand nicht in der Leiter, deshalb standen unsere Überschriften auf 12 und damit eine Stufe zu laut; intelli-os setzt sie durchgehend auf 9.5–11px. Gemessen an fünfzehn Stellen, Median 10.5 mal 1.05 = 11. */ --text-0: 11px; --leading-0: 14px; --tracking-0: 0.08em; --text-1: 12px; --leading-1: 16px; --tracking-1: 0.0025em; --text-2: 14px; --leading-2: 20px; --tracking-2: 0em; --text-3: 16px; --leading-3: 24px; --tracking-3: -0.0025em; --text-4: 18px; --leading-4: 26px; --tracking-4: -0.005em; --text-5: 24px; --leading-5: 30px; --tracking-5: -0.00625em; --text-6: 28px; --leading-6: 36px; --tracking-6: -0.0075em; --text-7: 35px; --leading-7: 40px; --tracking-7: -0.01em; /* Uppercase-Labels brauchen positive Laufweite — die einzige Ausnahme von der Kopplung oben, weil Versalien anders setzen als Gemischtsatz. Für die Überschrift-Stufe gilt --tracking-0 (weiter, weil kleiner). */ --tracking-caps: 0.06em; /* Weight-Budget. Absichtlich drei Werte. 700 und 800 gibt es nicht: wenn das Grundgewicht steigt, kann Fettung keine Hierarchie mehr tragen. */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "SF Mono", Menlo, monospace; /* ═══ ABSTAND ══════════════════════════════════════════════════════════ 4er-Raster, deckungsgleich mit Radix und Tailwind. Benutzt werden die semantischen Namen in semantic.css, nicht diese Zahlen. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; /* ═══ FORM ═════════════════════════════════════════════════════════════ Aus der Messung abgeleitet, nicht aus einem fremden System: 8, 10 und 12 machten zusammen 63 Fundstellen aus und sind visuell nicht zu trennen. Zusammengezogen auf 10. Pill bleibt reserviert für primäre CTAs und Tabs. */ --radius-1: 6px; /* Input, Chip, kleine Fläche */ --radius-2: 10px; /* Button, Panel */ --radius-3: 16px; /* Card, Modal */ --radius-pill: 9999px; --radius-circle: 50%; /* ═══ HÖHEN interaktiver Elemente ══════════════════════════════════════ Leiter aus Radix und Geist, die beide 24/32/40 setzen — und sie deckt sich mit dem Ist-Wert aus intelli-os, sobald man richtig misst. Nachgerechnet 07.08.26: ihr Standardknopf ist 38px hoch, aber die ganze Oberfläche liegt unter `zoom: 1.05`. Effektiv sind das 39.9px, also unsere 40. Auch Radius (9 → 9.5 gegen unsere 10) und Schrift (13 → 13.7 gegen unsere 14) treffen sich. Die scheinbare Abweichung war ein Messfehler: rohe Werte gegen gerenderte verglichen. Damit gilt weiter: 24px ist exakt die WCAG-2.2-Untergrenze für Zielgrössen. --control-sm ist der Boden, nicht der Normalfall — Icon- Aktionen in dieser Grösse brauchen genug Abstand zueinander. */ --control-sm: 24px; /* Chip, Row-Aktion */ --control-md: 32px; /* Toolbar, dichte Tabelle, Icon-Button */ --control-lg: 40px; /* Standard: Button, Input, Select */ /* Dieselbe Leiter für den Finger, eine Stufe höher angesetzt. Ein Zeiger trifft auf ein Pixel genau, eine Fingerkuppe deckt rund 9mm ab — deshalb ist 24px am Telefon kein Boden mehr, sondern zu klein. Die Werte sind KEINE zweite Designsprache: dieselben Komponenten, dieselben Farben, nur die Höhe wächst. Gebunden wird die Leiter in layouts.css an der Telefon-Shell, damit jede Komponente darin automatisch mitwächst. 44px, weil iOS und WCAG 2.2 AAA dieselbe Zahl nennen. */ --control-touch-sm: 32px; /* Boden am Telefon: Chip, Row-Aktion */ --control-touch-md: 40px; /* dichte Zeile, Icon-Button — ihr m-iconbtn misst 38, effektiv 39.9 */ /* 48 ist GESETZT, nicht gemessen: bei intelli-os gibt es dazu kein Gegenstück. Ihr Standardfeld am Telefon ist 40 (effektiv 42), ihre grossen Ziele liegen bei 54–57 — 48 liegt dazwischen und kommt aus Material. Die zwei Stufen darunter sind dagegen belegt (siehe Kommentar oben). */ --control-touch-lg: 48px; /* Standard: Button, Input, Select */ --target-min: 44px; /* Trefferfläche jedes Ziels am Telefon */ /* Wieviel die nächste Spalte des Wisch-Boards herausguckt. Kein Abstand, sondern eine Ansage: nur weil dort etwas angeschnitten ist, weiss man, dass es weitergeht. Zu klein wirkt es wie ein Rundungsfehler, zu gross verliert die aktive Spalte ihre Breite. Wert aus intelli-os, aber gerechnet und nicht abgeschrieben: ihre 52 sind unter `zoom: 1.05` effektiv 54.6. Die rohen 52 zu übernehmen war genau die Falle, vor der der Block zwei Absätze weiter oben warnt. Gerundet auf 56 — ein Peek ist keine Leiterstufe, aber ein glatter Wert altert besser. */ --swipe-peek: 56px; /* ═══ BEWEGUNG ═════════════════════════════════════════════════════════ Vier Dauern, zwei Kurven. Bewegung erklärt, was passiert ist — sie ist kein Schmuck. Deshalb kurz: alles über 300ms hält den Nutzer auf. Die Kurve startet schnell und bremst aus (ease-out). Etwas, das langsam anfährt, wirkt zäh, weil die Reaktion auf den Klick verzögert scheint. */ --motion-instant: 80ms; /* Zustandswechsel: gedrückt, umgeschaltet */ --motion-fast: 120ms; /* Hover, Farbwechsel */ --motion-base: 180ms; /* Aufklappen, Layoutwechsel */ --motion-slow: 280ms; /* Slide-out, Drawer, Sheet */ /* „Aus" für prefers-reduced-motion. Nicht null, weil manche Browser dann das transitionend-Ereignis nicht mehr feuern. */ --motion-off: 0.01ms; --ease-out: cubic-bezier(0.2, 0.8, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* ═══ FARBE ════════════════════════════════════════════════════════════ Stufen-Rollen (verbindlich, Radix-Logik): 1–2 App-Background, abgesetzter Grund 3–5 interaktive Flächen: normal / hover / aktiv 6–8 Borders: subtle / default / strong 9–10 Solid: Akzentfläche, Primary Button (+ hover) 11–12 Text: gedämpft / voll Borders werden SOLIDE Stufen, keine rgba-Transparenz: dieselbe Alpha-Border rendert über zwei Untergründen als zwei Farben und macht die Hierarchie kaputt. Status: Phase 1. navy · teal · neutral · green/amber/red/blue. */ }