P2503 · Sub-Task · gehört zu P2503-82 — Theme & Corporate Design

Badge SDC — 5 SOLCOM-Varianten

READY-FOR-DEV P2503-157 Figma Komponente → Figma Dokumentation → Erstellt: 2026-05-19

User Story

Als Site-Builder möchte ich die byte_theme:badge-Komponente in den 5 SOLCOM-Designsystem-Varianten (Lime, Dark, Disabled, Lined, Matching) verwenden können, damit Badges durchgehend zum Corporate Design passen und nicht mehr auf die generischen Varianten primary/secondary angewiesen sind.

Figma-Analyse

Komponenten-Node: 61121:32532 · Dokumentations-Node: 61121:32695. Grilling-Session hat die Figma-Spec direkt ausgelesen — nachfolgende Werte sind Figma-autoritativ.

Varianten-Spec (Figma-bestätigt)

VarianteHintergrundTextfarbeBorderRadiusPaddingGröße
lime bg-white text-[var(--brand-dark-blue)] border-transparent rounded-[10px] px-[4px] 28×18px
dark bg-[var(--brand-lime)] text-[var(--brand-dark-blue)] border-transparent rounded-[10px] px-[4px] 28×18px
disabled bg-[var(--brand-gray)] text-[var(--brand-light-gray)] border-transparent rounded-[10px] px-[4px] 28×18px
lined bg-transparent text-white border border-[var(--brand-lime)] rounded-[20px] px-[8px] py-[4px] 36×26px
matching bg-transparent Substruktur (s. u.) border border-[var(--brand-lime)] rounded-[20px] px-[8px] py-[4px] 75×26px

Matching-Variante — Substruktur

Die matching-Variante hat drei feste Elemente innerhalb des Badges:

  1. Lime-Punkt — 8×8px Kreis, bg-[var(--brand-lime)], dekorativ (kein eigener Prop)
  2. Kürzel — weißer Text, 15px Regular (font-sans font-medium text-[15px] text-white), Prop: abbreviation
  3. Prozentwert — Lime-Text, 19px Bold (font-sans font-bold text-[19px] text-[var(--brand-lime)]), Prop: percentage

Gap zwischen Elementen: gap-[4px]. Kein label-Prop wird bei style=matching gerendert.

Korrektur gegenüber Jira-Ticket

Das Ticket enthält drei Ungenauigkeiten, die durch die direkte Figma-Analyse korrigiert wurden:

  • Radius Lime/Dark/Disabled: Ticket sagt rounded-full, Figma bestätigt rounded-[10px]
  • Lined-Borderfarbe: Ticket schweigt, Figma bestätigt border-[var(--brand-lime)] (nicht weiß)
  • Token-Namen: Ticket nennt --color-lime, --color-dark-blue — korrekte Namen in theme.brand.css sind --brand-lime, --brand-dark-blue

Textgröße: Figma bestätigt 15px (nicht text-sm = 14px wie im bestehenden Badge-Twig). Im Zuge dieser Story korrigieren.

Bestehendes SDC

Komponente existiert unter web/themes/custom/byte_theme/components/badge/. Aktueller Enum: primary | secondary | pill. Canvas-Config in config/sync/canvas.component.sdc.byte_theme.badge.yml (mehrere Versionen, Default: primary).

Canvas-Belegung

  • canvas.content_template.node.project_offer.card → Badge mit style: "pill"
  • canvas.content_template.node.project_offer.full → Badge mit style: "secondary"
  • canvas.content_template.node.vacancy.full → Badge mit style: "secondary"

Grill-Entscheidungen

Deprecation-Strategie — Option C: Twig-Fallback

Der Schema-Enum bekommt ausschließlich die 5 neuen Werte. Kein Update-Hook, kein DB-Migration-Script. Das Twig mappt alle Legacy-Werte (pill, primary, secondary, unbekannte Strings) via |default('lime')-Fallback auf lime. Bestehende Canvas-Blöcke (pill, secondary) rendern unverändert als lime. Redakteur kann im Canvas-Editor bewusst auf den neuen Wert wechseln. Die Canvas-Config allowed_values_function: canvas_load_allowed_values_for_component_prop aktualisiert sich automatisch nach SDC-Schema-Änderung.

Begründung: pill war bereits visuell identisch zu lime. primary/secondary hatten keine Figma-Entsprechung — der Schaden durch ein falsches Fallback-Rendering ist null.

Matching-Variante — Zwei neue Props

Neue optionale Props abbreviation (string) und percentage (string) werden dem Schema hinzugefügt. Sie haben nur visuellen Effekt bei style=matching. Alle anderen Varianten ignorieren sie. Kein Parsing von zusammengesetzten label-Strings. Der Lime-Punkt (8×8px-Kreis) ist dekorativ und braucht keinen Prop.

Icon-Props bleiben im Schema

icon und icon_first bleiben in badge.component.yml erhalten (Backward-Compat für Canvas-Blöcke, die diese Props gesetzt haben). In den 5 neuen Varianten-Implementierungen werden sie nicht gerendert — kein Icon-Figma-Äquivalent existiert in keiner der 5 Varianten.

Font-Klasse: font-sans

font-sans in theme.css ist auf "ScalaSansWeb" gemappt — das ist die Web-Variante von Scala Sans LF. Bestehende font-sans-Utilities sind korrekt. Für den Bold-Prozentwert in matching: font-sans font-bold.

Akzeptanzkriterien

  1. style-Prop in badge.component.yml: Enum enthält exakt lime, dark, disabled, lined, matching. Keine primary/secondary/pill-Werte im Enum.
  2. Lime: bg-white, text-[var(--brand-dark-blue)], rounded-[10px], px-[4px], Text text-[15px] font-sans.
  3. Dark: bg-[var(--brand-lime)], text-[var(--brand-dark-blue)], rounded-[10px], px-[4px].
  4. Disabled: bg-[var(--brand-gray)], text-[var(--brand-light-gray)], rounded-[10px], px-[4px].
  5. Lined: bg-transparent, border border-[var(--brand-lime)], text-white, rounded-[20px], px-[8px] py-[4px].
  6. Matching: 8×8px Lime-Kreis + abbreviation-Text weiß 15px + percentage-Text Lime 19px Bold, border border-[var(--brand-lime)], rounded-[20px], gap-[4px].
  7. Keine Hex-Literale in badge.twig — ausschließlich var(--brand-*) Tokens.
  8. Twig-Fallback: pill, primary, secondary, unbekannte Werte → rendern als lime.
  9. docs/design/MAPPING.html: Badge-Eintrag (Node 61121:32532) auf Status matched gesetzt.

QA-Plan

Basis-URL: https://solcom.ddev.site/. Alle Schritte erfordern Admin-Login.

AK-#URL / PfadAktionErwartet
1 /admin/appearance/component/sdc.byte_theme.badge/audit Seite öffnen → Style-Prop-Dropdown inspizieren Dropdown zeigt exakt 5 Werte: lime, dark, disabled, lined, matching. Kein primary/secondary/pill mehr.
2 /node/add/page → Canvas-Editor öffnen → Badge-SDC einfügen → Style = lime Label eintragen, speichern, Vorschau öffnen Badge: weißer Hintergrund, Dark-Blue-Text, Radius sichtbar kleiner als vollrunder Pill, keine Border sichtbar.
3 Gleiche Testseite → Badge-Style = dark Speichern, Vorschau Badge: Lime-Hintergrund (#BEDC00), Dark-Blue-Text, gleiche Größe wie Lime.
4 Gleiche Testseite → Badge-Style = disabled Speichern, Vorschau Badge: mittleres Grau (#828282) als Hintergrund, hellgrauer Text (#EBEBEB), optisch inaktiv wirkend.
5 Gleiche Testseite → Badge-Style = lined Speichern, Vorschau Badge: transparenter Hintergrund, sichtbarer Lime-Border, weißer Text, größere Pill-Form (20px Radius), sichtbar größer als Lime/Dark/Disabled.
6 Gleiche Testseite → Badge-Style = matching, abbreviation = "Ab", percentage = "85%" Speichern, Vorschau Badge: Lime-Kreis (8px) + "Ab" in Weiß + "85%" in Lime-Fett (größer), Lime-Border, breiter als Lined.
7 Vorschauseite aus AK 2–6 → DevTools öffnen → Badge-Element inspizieren Computed Styles prüfen Keine Hex-Literale (#BEDC00 etc.) direkt in Tailwind-Klassen — alle Farben über var(--brand-lime), var(--brand-dark-blue) etc. aufgelöst.
8 (Fallback) Bestehende Projekt-Angebots-Seite (/de/projekte → eine Card öffnen) Badge-Rendering prüfen (war pill) Badge rendert als lime-Variante — weißer Hintergrund, Dark-Blue-Text. Kein Visual-Regression-Bruch.
9 (MAPPING) docs/design/MAPPING.html (lokal öffnen) Badge-Zeile für Node 61121:32532 prüfen Status-Spalte zeigt matched, kein partial oder gap mehr.

Eltern-Story

P2503-82 — Drupal Theme & SOLCOM Corporate Design (Farben, Fonts, Grid)

Artefakte

Worklog

DatumOpDetails
2026-05-20 Browser-Verify Smoketest auf solcom.ddev.site/fuer-freiberufler/projektliste — Badge lime-Variante: fontSize=19px ✓, fontWeight=700 ✓, bg=rgb(255,255,255) ✓, color=rgb(0,31,70) ✓, borderRadius=8px ✓, padding=4px ✓, minHeight=30px ✓. Klassen: solcom-badge solcom-badge--lime flex-row.
2026-05-20 Review Persisted — standards: 2 hard / 5 judgement, canvas: 2 hard / 3 judgement, spec: 6 fails (worst: Canvas-Registry active_version-Hash-Mismatch + default_value=primary ungültig)