Architecture Decision Record · 0001

Fork des Byte-Themes als „SOLCOM" mit Figma-Typografie

TL;DR — Theme-Fork nach web/themes/custom/byte_theme/ mit beibehaltener Machine-ID byte_theme. Fluid Typography mit clamp(), ScalaSansWeb selbst-gehostet, Montserrat ExtraBold aus Google Fonts Static API.

Kontext

Die SOLCOM-Drupal-Site nutzt das contrib-Theme drupal/byte_theme (Mercury-Generator-Output). Wir müssen die SOLCOM-Brand-Werte aus dem Figma-Design (figma.com/design/CHHDfbpX8Ys2LBiGs5HVK0, Node 676:1976 „Typography") einsetzen: Schriften (Scala Sans + Montserrat), eine eigene Schriftgrößen-Skala (H1 = 59 px, H2 = 39 px ExtraBold, H3 = 28 px, Body = 19 px) und Lineheights (110 % / 135 % / 120 % / 100 %). Das Theme dokumentiert in seiner eigenen CUSTOMIZING.md zwei legitime Anpassungspfade.

Entscheidung

Theme-Fork nach web/themes/custom/byte_theme/ mit beibehaltener Machine-ID byte_theme, Display-Name auf „SOLCOM". drupal/byte_theme wurde via composer remove aus den Dependencies entfernt. Die Tailwind-Schriftgrößen-Skala wird über Fluid Typography mit clamp() umgesetzt (viewport 320 → 1280 px), Mobile-Werte heuristisch aus den Desktop-Werten abgeleitet (× 0.65–0.79 je nach Heading-Stufe). Schriftquellen: ScalaSansWeb selbst-gehostet aus dem bestehenden SOLCOM-Lizenzbestand (solcom.de liefert die .woff-Dateien), Montserrat ExtraBold als OFL-Variante aus Google Fonts Static API (latin-Subset, .woff2). Adobe Fonts wurde als Endzustand erwogen, aber wegen unklarem Account-Zugang vertagt — Übergangslösung mit den Live-Site-Schriften, die der Brand-Verantwortliche freigegeben hat.

Rejected alternatives

Webroot-Override rejected

Byte-Theme empfohlener Pfad ohne Fork: nur theme.css + fonts.css neben index.php legen. Reicht nur für Farben + Schriftfamilien — nicht für Tailwind-@theme-Werte (Schriftgrößen, Lineheights), die zur Build-Zeit kompiliert werden.

Subtheme rejected

Vom Byte-Theme explizit verboten: „tightly coupled, no backwards compatibility".

Vollständiges Rename auf solcom_theme rejected

Hätte Drupal-Config-Reimport, Twig-Namespace-Refactor (@byte_theme/... → @solcom_theme/...), JS-Globals und PHP-Hook-Namespace-Migration erfordert. Verworfen zugunsten Display-Name-Switch.

Breakpoint-basierte Schriftgrößen-Skala rejected

Wäre architektur-konform zu Byte-Theme-Defaults, hätte aber für jedes Heading drei explizite Werte verlangt, die Figma nicht liefert. Fluid clamp() braucht nur Mobile-Min und Desktop-Max.

Adobe-Fonts-Embed sofort rejected

Blockiert von Account-Verfügbarkeit zum Zeitpunkt der Umstellung. Tausch ist später ein 5-Minuten-Refactor (CSS-font-family-Strings + ein <link>).

Consequences

Composer-Updates für drupal/byte_theme greifen nicht mehr; Upstream-Patches müssen manuell gecherry-picked werden. Da Twig-Namespaces, Library-Names und Drupal-Config-IDs identisch zum Upstream sind, bleibt der Cherry-Pick-Aufwand klein.
ScalaSansWeb (Live-Site-Schnitt) ist nicht byte-identisch zu ScalaSansLF (Figma-Spec). Mikrooptische Unterschiede in Kerning + Punzenform sind möglich, im Body-Bereich nicht wahrnehmbar. Auflösung beim späteren Adobe-Fonts-Wechsel.
Figma definiert keine Mobile-Werte. Die hier gewählten Mobile-Werte (40/28/22/17/15/32 px) sind eine pragmatische Heuristik. Brand-Korrekturen jederzeit möglich durch Anpassen der clamp()-Min-Werte in src/main.css.
H4–H6 wurden absichtlich nicht angetastet (Figma definiert sie nicht). Einzelne Components (z. B. card-icon) setzen via CVA-Klassen eigene Heading-Größen, die @layer base h3-Defaults überschreiben — diese Stellen sind separat zu pflegen, falls Brand-konformer Override gewünscht ist.
Lizenz-Risiko der .woff-Files im öffentlichen Repo wurde vom Brand-Verantwortlichen bewusst akzeptiert; Annahme: SOLCOM-Web-Lizenz für ScalaSansWeb deckt Self-Hosting via Drupal-Theme-Repo ab. Beim Wechsel auf Adobe Fonts entfällt das Risiko.

FAQ

Wann wird Adobe Fonts eingebunden?: Sobald Account-Zugang geklärt ist. Der Wechsel ist ein 5-Minuten-Refactor: CSS-font-family-Strings tauschen + <link> ergänzen. Der Fork-Vertrag ändert sich dabei nicht.
Warum keine Mobile-Werte aus Figma?: Figma liefert nur Desktop-Werte. Die Mobile-Min-Werte (× 0.65–0.79 je nach Stufe) sind eine dokumentierte Heuristik und jederzeit in src/main.css anpassbar.