🐞 Bug: 11.7 Schriftgröße wird bei Vergrößerung nicht übernommen

[fohi17]

Note

• [x ] Ich achte beim Erstellen des Issues darauf, dass ich keine fachlichen und unternehmensinternen Details preisgebe.

---

Schriftgröße wird bei Vergrößerung nicht übernommen

Beschreibung des Fehlers

Wenn man die Schriftgröße im Browser größer stellt (gemäß BIK BITV 11.7), wird das bei mehreren Komponenten für Überschriften, Links und Buttons (siehe unten) nicht übernommen, und die Schrift bleibt klein.
Die Ursache ist wahrscheinlich die font-size, die für die Elemente über var auf 16px festgelegt ist.

Reproduktion

Style: BMF, Z2
Version: v2.0.0-rc.6

Schritte zum Reproduzieren des Verhaltens:

Schriftgröße des Browsers ändern

Im Chrome:
Einstellungen -> Darstellung -> Schriftgröße
Im Firefox:
Einstellungen -> Allgemein -> Schriftarten

Prüfe folgende Komponenten:

BMF: Überschriften

• alert
• card

BMF: Links

• nav

Zoll(v2): Alle Links in allen Komponenten
bspw.: breadcrumb, link-group

Zoll(v2): Alle Buttons in allen Komponenten
bspw.: accordion, button-group, button etc.

Erwartetes Verhalten

Der Text von allen Texten, inkl. Überschriften, Links und Buttons wird mitskaliert.

Screenshots

[deleonio]

Das Styling ist gekapselt, wie man bei der Headline sieht. Wir prüfen, die inherit Option.

[deleonio]

@sdvg: Bitte mal eine Lösungsskizze erstellen.

[sdvg]

Ich würde folgende Konventionen für Größeneinheiten in CSS vorschlagen:

• Allgemein wird rem verwendet
• Ausnahmen:
  • px für: border-width, border-radius, box-shadow (Diese skalieren nicht gut, und müssen es auch nicht)
  • Relative Einheiten (%, vw, etc.) können verwendet werden, wo sie Sinn ergeben (z.B. Layout)
• Um mit verschiedenen root font sizes in verschieden Projekten umgehen zu können:
  • Definiert das Projekt optional eine CSS custom property (--kolibri-root-font-size: 10)
  • Verwenden wir bei der Benutzung von rem grundsätzlich eine Sass function.
  • Optional: Außerdem sprechen wir für neue Projekt die Empfehlung aus, die root font-size auf 62.5% zu setzen. Das entspricht 1rem = 10px und macht die Arbeit z.B. in den Dev Tools am einfachsten.

// Sass Funktion, wie sie in KoliBri genutzt wird:
@function rem($size) {
  @return calc(#{$size}rem / var(--kolibri-root-font-size, 16));
}

// Optionale Projekt-Konfiguration, wenn root font-size != 16px
html {
  font-size: 62.5%;
  --kolibri-root-font-size: 10;
  // wird beides weggelassen, gehen wir von einer Standardgröße von 16px aus -> funktioniert ebenfalls.
}

// Hier einmal exemplarisch verwendet. Erzeugt `calc(16rem / var(--kolibri-root-font-size, 16))`, was computed 1.6rem bzw. 16px entspricht:
body {
  font-size: rem(16);
}

[deleonio]

Das machen wir so.

[sdvg]

Die beschriebenen Fehler sind im v1-Theme vom BMF (das wir nicht mehr weiter pflegen) noch reproduzierbar, in v2 aber schon gelöst ✅