Skip to content

Public Themes - kein inherit #7475

@deleonio

Description

@deleonio

✨ User-Story: Schriftgrößen-Vererbung in WebComponents gezielt steuern

Beschreibung:
Alle WebComponents sollen standardmäßig nicht die Schriftgröße des umgebenden Textes erben.
Eine Ausnahme bilden kol-link und kol-icon.
Zusätzlich soll beim kol-link-Component auch der enthaltene <a>-Tag font-size: inherit gesetzt bekommen.


Anforderungen:

  • Standardmäßig sollen alle WebComponents keine Schriftgröße vom Eltern-Element erben.
  • kol-link und kol-icon sollen font-size: inherit nutzen.
  • Im kol-link-Component muss zusätzlich der <a>-Tag font-size: inherit bekommen.
  • HTML-Tags, die typischerweise keine Schriftgrößen erben (<button>, <input>, <select>, etc.), müssen ggf. explizit mit einer font-size versehen werden.
  • Umsetzung soll wartbar und klar strukturiert sein.

Lösungsskizze:

  • Standardregel für alle WebComponents:
    :host {
      font-size: initial; /* oder unset, je nach gewünschtem Standard */
    }
  • Ausnahme in kol-link:
    :host {
      font-size: inherit;
    }
    
    a {
      font-size: inherit;
    }
  • Ausnahme in kol-icon:
    :host {
      font-size: inherit;
    }
  • Innerhalb der Components: explizite font-size für <button>, <input>, <select>, falls sie benötigt wird.

Mögliche Tests:

  • Standard-Komponenten ignorieren die Schriftgröße der Umgebung.
  • kol-link und kol-icon passen ihre Größe dynamisch an den Fließtext an.
  • Der <a>-Tag innerhalb von kol-link übernimmt die Schriftgröße korrekt.
  • Eingabe- und Interaktionselemente (<input>, <button>) innerhalb von Components haben eine definierte, konsistente Schriftgröße.
  • Keine unbeabsichtigte Änderung des Layouts durch die neuen Regeln.

Abnahmekriterien:

  • Alle WebComponents (außer kol-link und kol-icon) erben nicht die Schriftgröße des Umfelds.
  • kol-link und kol-icon integrieren sich optisch korrekt in Fließtext.
  • <a>-Tag im kol-link übernimmt zuverlässig die Schriftgröße des Elternelements.
  • Keine visuellen Regressionen bei bestehenden Komponenten.
  • Funktioniert in verschiedenen Browsern konsistent.

Metadata

Metadata

Assignees

Labels

theme:allbwst, bzst, desy, desybri, ecl-ec, ecl-eu, itzbund, zollv2v3

Type

Projects

Status

✅ Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions