/* ============================================================ Komponente: ikon-button ------------------------------------------------------------ Quelle: Figma „Screens: App und Web" · Back icon Button 13837:14912 / 13790:14462 · settings icon button 13332:35429 · Close icon Button 13414:18376 (filled) / 13414:18380 (ghost) ausgelesen am 04.09.2026. Freistehende Icon-Aktion. Immer gefüllt (SKILL.md §6: „Freistehende Icon-Aktion? → Icon-Button, immer gefüllt"). 45 x 45 aus Figma, Radius voll. Die Ghost-Variante ist ausschließlich das ✕ in Kopfzeilen von Dialog und Sheet — die liegt bereits in dialog.css als .dialog__schliessen / .sheet__schliessen und wird hier NICHT wiederholt. Setzt tokens.css und base.css voraus. VERWENDUNG VIERZEHN KOMPONENTEN, EIN BAUTEIL. Das Design System führt Trophy, Instructions, Close, Back, Chevron, External Link, Flash, Mehr, Fullscreen, Search, Bedienhilfe, Accessability und die drei kleinen als eigene Komponenten. Sie unterscheiden sich nur im Icon und in der Größe — Fläche, Rand, Radius und alle vier Zustände sind identisch. Deshalb hier EINE Klasse mit zwei Größen und zwei Fassungen (gefüllt / ghost) statt vierzehn Dateien. Ausnahmen mit eigener Datei, weil sie mehr sind als ein Icon in einem Kreis: `filter button` (mit Text, siehe searchbar.css) und `Search button` in der Fassung `icon+text`. ------------------------------------------------------------ GEMESSENE MASSE OHNE TOKEN-GRUNDLAGE 45 x 45 Buttonfläche. 30 x 30 Die kleine Fassung, mit 8er-Icon. Am Component Set `close icon button small` (11558:2130, size-[30px]) und von Lisi bestätigt (08.09.2026). Vorher stand hier 29,8 x 30 aus einer einzelnen Instanz. 14 Icon im Zurück-Button. 23 Icon im Zahnrad-Button. 10 ✕ im Schließen-Button. ============================================================ */ .ikon-button { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 45px; height: 45px; padding: 0; border-radius: var(--radius-full); background-color: var(--button-icon-button-fill); color: var(--button-icon-button-text); cursor: pointer; /* Der Rand ist immer da, nur oft durchsichtig — sonst springt der Button in der Größe, sobald ein Zustand einen ergänzt (AGENTS.md §15). Hier trägt er von Anfang an eine Farbe. */ border: var(--outline-default) solid var(--button-icon-button-outline); } .ikon-button__ikon { display: block; overflow: visible; width: 14px; height: 14px; } /* Der Zurück-Pfeil ist in Figma eine um 90 Grad gedrehte Instanz des Pfeil-Icons. Der Export liefert die Geometrie VOR der Drehung (AGENTS.md §17) — das Icon zeigt also nach unten und wird hier gedreht. Im Uhrzeigersinn: unten wird links. */ .ikon-button__ikon--zurueck { transform: rotate(90deg); } .ikon-button__ikon--zahnrad { width: 23px; height: 23px; } /* Der Blitz im Scanner. 21 x 21 aus dem Export. */ .ikon-button__ikon--blitz { width: 21px; height: 21px; } /* AUF EINEM BILD: derselbe Button, aber mit Blur hinter der Fläche. §18 („Bedienelemente über Inhalt") verlangt das, damit der Button auf einem beliebig hellen oder dunklen Kamerabild lesbar bleibt. 3 px aus Figma (13880:15189). */ .ikon-button--auf-bild { backdrop-filter: blur(3px); } /* ------------------------------------------------------------ AN: ein Icon-Button, der seinen Zustand HÄLT ------------------------------------------------------------ Quelle: Figma „Design System" → Flash button, 2019:17767 (aus) und 2019:17769 (an), ausgelesen am 05.09.2026. Der Blitz im Scanner ist bisher der einzige Icon-Button im System, der einen Zustand hält: er schaltet das Kameralicht an, und das bleibt an, bis man wieder tippt. Deshalb aria-pressed und nicht nur :active. AN IST DIE AKTIV-BEHANDLUNG DES CHIPS, nicht die Press-Behandlung des Buttons: Fläche label-fill-active Rand 2 px label-outline-active Glow label-glow, Radius 4 Icon label-text Das ist dieselbe Sprache wie am aktiven Chip und an der Kategorie-Karte — „diese Sache ist gerade eingeschaltet" sieht überall gleich aus. Ich hatte hier zuerst die Press-Tokens stehen; das war zu leise und hat zwei nah beieinander liegende Graustufen gegeneinander gestellt. Der Glow ist NIE das alleinige Signal (§4, WCAG 1.4.1) — hier tragen Fläche und Rand, der Glow verstärkt. DER RAND WÄCHST ALS SCHATTEN, nicht über border-width: sonst verschöbe sich das Icon beim Schalten um ein Pixel (§23.6). ------------------------------------------------------------ */ .ikon-button[aria-pressed="true"] { background-color: var(--label-fill-active); border-color: var(--label-outline-active); color: var(--label-text); box-shadow: inset 0 0 0 var(--outline-default) var(--label-outline-active), var(--glow-chip); } /* Das ✕ ist 10 px — kleiner als jedes andere Icon im Button. So steht es in Figma (13414:18384) und so steht es auch in dialog.css am .dialog__schliessen. */ .ikon-button__ikon--schliessen { width: 10px; height: 10px; } /* ------------------------------------------------------------ GHOST: der Chevron und der externe Link in Listen ------------------------------------------------------------ Quelle: Figma „Screens: App und Web" → Chevron icon Button, Komponenten-Satz 13905:25138 mit den Varianten default, hover, pressed, focus. Ausgelesen am 04.09.2026. Derselbe Button, aber in Ruhe OHNE Fläche und OHNE Rand. Fläche und Rand kommen erst beim Überfahren und beim Drücken. 45 x 45 wie die gefüllte Fassung — die Zeile bekommt damit nebenbei ihre 45er Klickfläche zurück. Ruhe durchsichtig, Pfeil in text-description Hover icon-button-fill-hover, 1 px icon-button-outline, Pfeil in text-primary Press icon-button-fill-press, 2 px icon-button-outline-press, Pfeil in text-primary DASS DER PFEIL HELLER WIRD, steht nicht als Variable in der Komponente — der Export liefert für Ruhe und Hover aber zwei VERSCHIEDENE SVG-Dateien, und text-primary taucht in den Variablen von Hover und Press auf, in der Ruhe-Variante nicht. Daraus gelesen. Im System nachzutragen. DIE 2 PX BEIM DRÜCKEN SIND EIN INNERER SCHATTEN, KEIN BREITERER RAND (§23.6): eine Änderung der Randbreite verschiebt bei border-box den Inhalt um 1 px, ein Schatten kennt kein Layout. Dieselbe Lösung wie am Chip. ------------------------------------------------------------ */ .ikon-button--ghost { background-color: transparent; border-color: transparent; color: var(--text-description); } @media (hover: hover) and (pointer: fine) { .ikon-button--ghost:hover:not(:disabled) { background-color: var(--button-icon-button-fill-hover); border-color: var(--button-icon-button-outline); color: var(--text-primary); } } .ikon-button--ghost:active:not(:disabled) { background-color: var(--button-icon-button-fill-press); border-color: var(--button-icon-button-outline-press); box-shadow: inset 0 0 0 var(--outline-default) var(--button-icon-button-outline-press); color: var(--text-primary); } /* ------------------------------------------------------------ KLEIN: 30 x 30 statt 45 x 45 ------------------------------------------------------------ Quelle: Figma „Design System" · close icon button small 11558:2130 · Favoriten cover icon button 11210:577 · Weiterlesen remove icon button 11210:787 ausgelesen am 04.09.2026. Dieselben Zustände, dieselben Tokens, nur kleiner. Es gibt sie sowohl gefüllt als auch als Ghost. SIE LIEGT UNTER DER 44er-UNTERGRENZE, und das ist gewollt: sie sitzt IN einer Fläche, die selbst das Ziel ist — auf einem Cover, an einer Fortsetzen-Karte. Die Figma-Doku zum Banner sagt es von der anderen Seite her: der Schließen-Knopf dort ist 45 und „nicht gegen close icon button small (30) zu tauschen, der ist für Flächen gedacht, die von selbst verschwinden". Wo sie doch allein steht, gehört `.touch-target` dazu — das ::after-Overlay vergrößert das Ziel, ohne die Box zu vergrößern. ------------------------------------------------------------ */ .ikon-button--klein { width: 30px; /* gemessen, siehe oben */ height: 30px; } .ikon-button--klein .ikon-button__ikon { width: 8px; /* gemessen, siehe oben */ height: 8px; } /* IN RUHE UND BEIM ÜBERFAHREN HAT DIE KLEINE FASSUNG KEINEN RAND. Am 08.09.2026 an allen drei Sätzen gegengeprüft — close icon button small, Favoriten cover icon button und Weiterlesen remove icon button haben in keiner Ruhe-Variante einen Strich. Die 45er Fassung hat einen; die kleine sitzt IN einer Fläche, die selbst schon eine Kante hat. Der Rand bleibt als transparente Deklaration stehen, damit die Scheibe beim Drücken nicht um 1 px springt (AGENTS.md §15) — .ikon-button:active färbt ihn dann auf icon-button-outline-press. */ .ikon-button--klein { border-color: transparent; } @media (hover: hover) and (pointer: fine) { .ikon-button--klein:hover:not(:disabled) { border-color: transparent; } } /* ------------------------------------------------------------ SUCHFELD: type=searchbar aus close icon button small ------------------------------------------------------------ Quelle: Figma „Design System" → close icon button small 11558:2130, Variantenachse type=searchbar, ausgelesen am 08.09.2026 (nach Lisis Änderung an Rand und Pressed). Die Scheibe im Suchfeld ist derselbe kleine Knopf, nur mit eigener Fläche und eigenem Rand-Verlauf: Ruhe label-fill-inverted, KEIN Rand Hover label-fill-inverted, 1 px ghost-outline-press Press label-fill-inverted, 1 px ghost-outline-press Fokus label-fill-inverted, KEIN Rand, nur der Ring IN RUHE IST DER RAND DURCHSICHTIG, NICHT „FELDFARBE" (korrigiert 09.09.2026, Lisi: „der hover und presed state bei X weichen von figma ab"). Hier stand --searchbar mit der Begründung, das sei die Farbe des Feldes und damit unsichtbar. Das war ein Denkfehler: der Ring liegt nicht auf dem Feld, sondern auf der SCHEIBE, und die ist label-fill-inverted — also dunkler als das Feld. Ein Ring in Feldfarbe darauf ist deutlich zu sehen. Genau dieser Ring war im Prototyp da, wo Figma gar keinen zeigt, und deshalb sahen Ruhe, Hover und Press fast gleich aus. Mit transparent bleibt die Deklaration stehen — die Scheibe springt beim Zustandswechsel also weiterhin nicht um 1 px (AGENTS.md §15) — und in Ruhe ist wirklich nichts zu sehen. Erkennbar ist die Scheibe über ihre Fläche (Dark 1,52:1, Light 1,13:1) und vor allem über das ✕ mit 17:1 bzw. 15:1 (§6, WCAG 1.4.11). Erst Hover und Press geben ihr eine Kante: 3,40:1 in Dark, 1,90:1 in Light. DIE FLÄCHE BLEIBT IN JEDEM ZUSTAND GLEICH. Die Grundregeln von .ikon-button würden sie auf icon-button-fill-hover bzw. -press ziehen; hier wird sie deshalb in allen Zuständen erneut gesetzt. PRESS IST 1 PX, NICHT 2 — anders als sonst im System (§23.6). So steht es in der Komponente. ------------------------------------------------------------ */ .ikon-button--suchfeld { background-color: var(--label-fill-inverted); border-color: transparent; /* siehe oben */ color: var(--label-text); } @media (hover: hover) and (pointer: fine) { .ikon-button--suchfeld:hover:not(:disabled) { background-color: var(--label-fill-inverted); border-color: var(--button-ghost-outline-press); } } .ikon-button--suchfeld:active:not(:disabled) { background-color: var(--label-fill-inverted); border-color: var(--button-ghost-outline-press); } .ikon-button--suchfeld:focus-visible { border-color: transparent; /* siehe oben */ } /* ------------------------------------------------------------ Zustände ------------------------------------------------------------ Aus der Figma-Komponente: Hover und Press wechseln den Fill, Press zusätzlich den Rand. Kein Glow — der ist der Akzentfamilie vorbehalten (§4). Hover nur auf Zeigergeräten, sonst klebt der Zustand auf dem Tablet nach dem Tippen fest (AGENTS.md §17). ------------------------------------------------------------ */ @media (hover: hover) and (pointer: fine) { .ikon-button:hover:not(:disabled) { background-color: var(--button-icon-button-fill-hover); } } .ikon-button:active:not(:disabled) { background-color: var(--button-icon-button-fill-press); border-color: var(--button-icon-button-outline-press); } .ikon-button:disabled { background-color: var(--button-disabled-fill); border-color: var(--button-disabled-outline); color: var(--button-disabled-text); cursor: default; } /* Das Nachgeben beim Drücken kommt aus motion.css und gilt dort für .btn. Der Icon-Button ist kein .btn, braucht dieselbe Rückmeldung aber genauso — der Zielgruppe fehlt sonst die Gewissheit, dass ein Tippen angekommen ist (§23). Werte und Kurve kommen aus motion.css, nicht von hier. */ .ikon-button { transition: transform calc(var(--motion-press) * var(--motion-scale)) var(--motion-ease-out), background-color calc(var(--motion-press) * var(--motion-scale)) var(--motion-ease-out), border-color calc(var(--motion-press) * var(--motion-scale)) var(--motion-ease-out); } .ikon-button:active:not(:disabled) { transform: scale(0.97); } @media (prefers-reduced-motion: reduce) { .ikon-button:active:not(:disabled) { transform: none; } } /* ============================================================ OFFEN ------------------------------------------------------------ · Der Fokus-Ring kommt aus base.css und sitzt 4 px vor der 45er Fläche. Der Komponenten-Satz 13905:25138 hat seit dem 04.09.2026 eine Variante `state=focus` — die ließ sich über die Schnittstelle nicht auslesen. Zu prüfen, ob sie denselben Ring meint. · Die GEFÜLLTE Fassung wechselt beim Drücken nur die Randfarbe, die Ghost-Fassung geht auf 2 px. Ob das Absicht ist oder die gefüllte Fassung nachzuziehen wäre, ist offen. · Der An-Zustand steht seit dem 05.09.2026 aus 2019:17769 hier. Die Fassung `state=focus` ist der normale Fokus-Ring aus base.css — in Figma ein weißer Ring um die 45er Fläche, hier 2 px focus-ring-color mit 4 Abstand. Passt. ============================================================ */