Product Requirements Document · solcom · P2503-168 · Sub-Task von P2503-82

Akkordeon SDC — Figma-Compliance-Fixes (Dark Context)

TL;DR — Drei CVA-Klassen in accordion.twig werden gemäß Figma-Spec korrigiert: Borderfarbe border-brand-white → border-brand-lime, vertikales Padding py-3.5 → py-6 (14 px → 24 px), Content-Gap in-[.accordion--open]:pb-3.5 → in-[.accordion--open]:pt-3 (12 px). Betrifft ausschließlich den Dark-Context-Stil. Scope: eine Datei, drei Token-Ersetzungen, kein JS. approved · Erstellt: 2026-05-20 · Jira: P2503-168

Problem Statement

Das Akkordeon (FAQ-Bereich) auf der SOLCOM-Website weicht im Dark-Context-Stil an drei Stellen von der Figma-Spezifikation ab:

Die Abweichungen sind rein visuell und betreffen keine Interaktions- oder Zugänglichkeitslogik. Sie entstanden beim initialen Aufbau der Komponente und wurden erst beim Figma-Compliance-Review (Figma-Node 61447:26220) entdeckt.

Solution

Drei präzise CVA-Klassen-Ersetzungen in accordion.twig bringen die Komponente auf Figma-Parität. Keine Schema-Änderung, kein JavaScript, keine neue Datei. Die Änderungen sind rückwärtskompatibel — bestehende Canvas-Seiten mit Accordion-Items profitieren automatisch.

→ Der Dark-Context-Stil ist der einzige produktiv genutzte Accordion-Stil auf der SOLCOM-Site. Ein Light-Mode-Stil existiert derzeit nicht im Theme und ist explizit nicht in scope.

User Stories

  1. Als Besucher der SOLCOM-Website möchte ich, dass die Trennlinien zwischen Accordion-Items in der Figma-konformen Lime-Farbe erscheinen, damit das Design konsistent mit der SOLCOM Corporate Identity wirkt.
  2. Als Besucher möchte ich, dass der Titelbereich eines Accordion-Items ausreichend vertikales Padding hat (24 px), damit die Klickfläche komfortabel zu treffen ist und die Seite nicht überdichtet wirkt.
  3. Als Besucher möchte ich, dass beim Öffnen eines Accordion-Items ein klarer visueller Abstand (12 px) zwischen dem Titel und dem Inhalt sichtbar ist, damit Titel und Content klar voneinander getrennt sind.
  4. Als Entwickler möchte ich, dass alle vier Interaktionszustände des Akkordeons (Closed/Default, Closed/Hover, Open/Default, Open/Hover) nach den Fixes visuell den Figma-Frames 61447:25132, 61447:25188, 61447:25198, 61447:25224 entsprechen, damit ich den visuellen Abgleich eindeutig verifizieren kann.
  5. Als Entwickler möchte ich, dass die Öffnen/Schließen-Animation des Akkordeons nach den Fixes weiterhin flüssig läuft und kein visueller Bruch auftritt, damit die Interaktionsqualität erhalten bleibt.
  6. Als Site Builder möchte ich, dass auf einer Canvas-Testseite (/test/akkordeon) ein Accordion-Container mit mindestens drei Items angelegt ist, damit ich die Fixes in der Produktionsumgebung schnell verifikzieren kann.

Implementation Decisions

Betroffene Komponente

Ausschließlich accordion.twig (SDC: byte_theme:accordion) wird modifiziert. accordion.component.yml, accordion.js und accordion-container bleiben unverändert.

CVA-Änderungen (drei Token-Ersetzungen)

CVA-VariableEigenschaftVorherNachherFigma-Quelle
section Borderfarbe border-brand-white border-brand-lime border-[var(--light,#bedc00)], dashed, 2px
title_button Vertikales Padding py-3.5 py-6 py-[var(--xs,24px)]
content Content-Gap (open) in-[.accordion--open]:pb-3.5 in-[.accordion--open]:pt-3 gap-[var(--xxs,12px)] zwischen Titelzeile und Inhalt

Die section-CVA enthält sowohl border-b-2 als auch [&:first-child]:border-t-2 — beide referenzieren dieselbe Farbklasse und werden durch eine einzige Token-Ersetzung aktualisiert.

Bei der Content-Gap-Änderung wechselt der Abstand von einem Bottom-Padding auf dem umschließenden Element zu einem Top-Padding auf dem Content-Div selbst — semantisch korrekter gemäß Figma-Gap-Modell.

Testing Decisions

Gute Tests prüfen beobachtbares Verhalten aus Nutzerperspektive — nicht interne CSS-Klassen-Strings.

Canvas-Testseite (obligatorisch)

Vor dem Smoke-Test wird eine Canvas-Seite unter /test/akkordeon angelegt, die einen accordion-container mit mindestens drei Accordion-Items mit Lorem-Ipsum-Inhalt enthält. Diese Seite dient als permanente Smoke-Test-URL für dieses und künftige Accordion-Tickets.

Manuelle Akzeptanztests

AKAktionErwartetes Ergebnis
AK1 Seite /test/akkordeon laden, Trennlinien betrachten Dashed Border ist Lime (#bedc00). DevTools: border-color auf .accordion zeigt Lime.
AK2 DevTools → .accordion--title-Button → Computed Styles padding-top und padding-bottom je 24 px. Gesamthöhe geschlossene Zeile ~80 px.
AK3 Accordion-Titel klicken → öffnen. Abstand zwischen Titel und Inhalt messen. 12 px Abstand. DevTools: padding-top: 12px auf .accordion--content wenn .accordion--open gesetzt.
Smoke Alle 4 Zustände durchlaufen: Closed/Default, Closed/Hover, Open/Default, Open/Hover Kein visueller Bruch. Animation flüssig. Nur ein Item gleichzeitig offen.

Kein PHPUnit-Test

Reine CVA-Klassen-Korrekturen in einem Twig-Template erfordern keinen PHPUnit-Test. Die visuellen Eigenschaften sind nicht maschinell verifizierbar ohne Screenshot-Diff-Tools, die derzeit nicht im CI-Stack sind. Manueller Browser-Test ist ausreichend.

Out of Scope

Further Notes