Was ist neu in SIRIUS 3.X?

Neu in SIRIUS 3.1: Barrierefreiheit

SIRIUS 3.1 setzt alles um, was ein Theme selbst zu den Anforderungen der WCAG 2.2 auf Stufe AA beitragen kann:

• Kontraste: Links stehen in der Sekundärfarbe, Schrift auf grünen Flächen ist dunkel statt weiß. Die neuen Tokens Text auf Markenfarbe und Text auf Overlays folgen automatisch der Sekundärfarbe. Alle drei Farbwelten sind geprüft, auch im Dark Mode – Waldgrün und Terrakotta haben dafür leicht angepasste Farben.
• Tastatur: sichtbarer Fokusrahmen überall, „Navigation überspringen“ vor der Hauptnavigation, Fokus auf dem Sprungziel der Onepage-Navigation, Inhalte von Card, Kontakt und Galerie auch bei Tastaturfokus.
• Mobile Navigation und Lightbox verhalten sich wie Dialoge: Zustand für Screenreader, Escape schließt, der Rest der Seite ist so lange gesperrt.
• Bewegung reduzieren im Betriebssystem schaltet die Animationen ab. Ohne JavaScript bleiben alle Inhalte sichtbar.

Was das Theme mitbringt und worauf du selbst achten musst, steht unter Barrierefreiheit in SIRIUS 3.

Update von 3.0 auf 3.1

1. Im Contao Manager die Pakete aktualisieren. Das Theme-Bundle 3.1 bringt die Onepage-Navigation 2.3.2 mit, danach die Datenbank aktualisieren.
2. Das Paket SIRIUS-THEME-3.1.x.zip unter Theme-Toolbox » Updates einspielen.
3. Im Modul der Onepage-Navigation die Option Sprunglink ausgeben aktivieren. Sie ist neu und standardmäßig aus.
4. Hast du im Live-Editor etwas übernommen, gibt es eine eigene _variables.scss unter layout/custom/. Übernimm die neuen Farbwerte im Theme Editor über Unterschiede anzeigen. Die Komponenten funktionieren auch mit der alten Datei, die Kontraste verbessern sich aber erst mit den neuen Werten.
5. Hast du eine eigene components/_navs.scss, schränke dort .nav--onepager a auf .nav--onepager li a ein. Sonst bleibt der Link „Navigation überspringen“ sichtbar.
6. Die Module Logo, Social Media und Menü-Button sowie die ARIA-Labels der Navigationen passt du von Hand an. Die neuen Fassungen stehen in der theme.xml des Pakets.

Alle Änderungen im Detail stehen im Changelog des Theme-Bundles.

Neu in SIRIUS 3.0

SIRIUS 3 setzt auf Contao 5.7 und die neue Theme Toolbox 4.2:

• Das Theme-Bundle liefert die Templates selbst aus: Aus dem bisherigen Metapaket ist ein vollwertiges Contao-Bundle geworden. Die Theme-Templates kommen jetzt als Twig aus dem Bundle (contao/templates) statt als .html5-Dateien im Projekt.
• Twig statt HTML5: mod_article und be_tinyMCE erben über {% extends "@Contao/…" %} von den Core-Templates und überschreiben nur noch, was SIRIUS wirklich ändert. Auch j_colorbox, js_nav--mobile und js_animate-article sind jetzt Twig; das vormals inline eingebettete JavaScript liegt als Datei im Theme.
• ce_sliderStop entfällt – dafür gibt es seit Contao 5.3 die verschachtelten Inhaltselemente.
• Neuer Speicherort: Die Theme-Dateien liegen jetzt im layout/-Verzeichnis statt im Datei-Manager (zuvor files/theme/). Die schreibgeschützte Originalversion liegt unter layout/sirius-theme/, deine eigenen Anpassungen verwaltet der Theme Editor unter layout/custom/.
• Theme Toolbox 4.2: Passend zu SIRIUS 3 wird die neue Version der Theme Toolbox eingesetzt. Sie bringt neben dem Theme Editor im Backend auch den neuen Live-Editor im Frontend mit, mit dem sich Farben, Schriften und Abstände direkt auf der echten Seite einstellen lassen.
• Nutshell Framework 2.x als Basis sowie die aktuellen Element-Bundles (Hero, Card, Kontakt, Grid) und die Onepage-Navigation 2.x.

Der Dark Mode, der mit SIRIUS 2.1.0 eingeführt wurde, ist weiterhin Bestandteil des Themes.

Wenn du ein bestehendes SIRIUS-2-Projekt aktualisieren möchtest, findest du in der Migrationsanleitung die wichtigsten Schritte und Stolperfallen – insbesondere zur Umstellung der Templates auf Twig und zum geänderten Speicherort der Theme-Dateien:

Migration von SIRIUS 2.X auf 3.X.