Theme Transformer Reference — IIO
Vollständige Referenz aller Transformer im IIO Theme-ETL-System. Jeder Transformer hat einen deklarierten Input-Stream, einen Output-Stream und eine Liste von Processors. Transformer sind deterministisch — gleicher Input → gleicher Output. Kanonische Quelle: Theme Registry (legacy transformer map nicht mehr lokal im Repository enthalten).
1 · Stream-Universe Map — alle Streams & Verbindungen
Übersicht aller benannten Streams und wie die Transformer sie verbinden. Streams sind unveränderliche, typisierte Datensätze — jeder Transformer konsumiert einen Input-Stream und produziert einen neuen Output-Stream.
2 · LINEAR-Familie — Transformer im Detail
Die LINEAR-Familie verarbeitet Brand-Tokens von der Rohextraktion bis zum
renderingfähigen CSS-Artifakt. Alle drei Transformer laufen
parallel auf dem canonical_theme_linear_v1-Stream.
Normalisiert den rohen Brand-Token-Stream zu kanonischen, plattform-unabhängigen Tokens. Das ist der Haupt-Canonicalization-Transformer (ETL Stage 4).
Processors im Detail
| Processor | Was er tut | Input | Output |
|---|---|---|---|
normalize_color_syntax |
Konvertiert rohe Hex-Farben (#FF5733) zu semantischen CSS Custom Properties (var(--iio-accent)) nach W3C DTCG-Standard. Kein Hardcode im Output. |
Hex-Set aus Brand-Quelle | CSS Custom Properties (--iio-*) |
abstract_typography |
Rohe Font-Family-Namen ("Inter", sans-serif) → IIO-Token-Name (--iio-font-base). Löst Platform-Font-Stack-Abhängigkeiten auf. |
css-font-stack | Token-Name + fallback-chain |
map_layout_grid |
Source-Grid-Definitionen (z.B. 12-Column-Grid, Gutters) → CSS Grid Custom Properties (--iio-grid-cols, --iio-gap). Responsive Breakpoints aus Contract. |
css-grid-definition | CSS Grid Custom Properties |
categorize_components |
Klassifiziert Brand-Komponenten (Button, Card, Nav etc.) nach IIO-Komponenten-Taxonomie. Basis für component_library im canonical Stream. | raw component list | normalized component_library |
canonical_theme_linear_v1 ist der zentrale Output-Stream
der LINEAR-Familie. Er wird als Input von allen RAENIL-Transformern sowie von
theme_linear_to_css_variables und theme_linear_logo_monochromization verwendet.
Rendert den kanonischen Token-Stream zu deploymentreifen CSS-Artifacts.
Das ist der Render-Transformer (ETL Stage 5) — produziert das style.css
das als Stream 3 in die WWW-Pipeline einläuft.
Processors im Detail
| Processor | Was er tut | Gate |
|---|---|---|
generate_custom_properties |
Schreibt alle Token-Overrides als :root { --iio-accent: …; } Block in assets/style.css. Deterministisch: gleicher Input = gleicher Output. Kein manuelles Edit nach Render. |
CSS-TOKEN-POLICY |
validate_syntax |
Prüft generiertes CSS auf syntaktische Korrektheit (W3C-kompatibel). Fehl → BLOCK, kein Deploy. Entspricht Gate 2 in der WWW-Pipeline. | CSS-DRIFT Gate |
optimize_for_browsers |
Minification, Autoprefixer-Einträge für Vendor-Prefix-Kompatibilität, Dead-Code-Elimination. Nur auf generiertem CSS — nie auf manuell geschriebenen Seiten-Styles. | – |
theme/families/*/assets/style.css — das ist der CSS-Artifact,
der als Stream 3 (theme) in die WWW-Publishing-Pipeline einläuft.
Validierung durch validate-manual-css.sh.
Spezialtransformer für Brand-Logos. Erzeugt automatisch Dark/Light/Monochrome-Varianten aus dem Original-Logo. Ausgabe: PNG-Artifacts mit Runtime-Manifest (welches Logo bei welchem Theme-Modus gezeigt wird).
Processors im Detail
| Processor | Was er tut |
|---|---|
detect_logo_background_classes |
Analysiert SVG/PNG auf Hintergrundfarb-Klassen. Erkennt ob Logo einen eigenen Hintergrund hat oder transparent ist. Bestimmt Preprocessing-Pfad. |
extract_connected_foreground |
Trennt Vordergrund (Wortmarke, Signet) vom Hintergrund. Basis für saubere Inversion ohne Artefakte. |
branch_dark_light_variants |
Erstellt Entscheidungsbaum: dark-on-light ↔ light-on-dark. Entscheidung basiert auf Kontrastverhältnissen aus canonical_theme_linear_v1. |
generate_monochrome_variants |
Erzeugt monochromatische Versionen (schwarz + weiß) durch HSL-Extraktion und Neuzuweisung. Alle Varianten in Zielauflösungen 16/32/64/128/256px gerastert. |
emit_theme_runtime_logo_manifest |
Schreibt logo-manifest.yml: Welches Logo-File bei welchem Theme-Modus (light/dark/print) verwendet wird. Runtime-Referenz für HTML-Templates. |
3 · RAENIL Mirror-Familie — Transformer im Detail
RAENIL ist das algorithmische Gegenstück zu LINEAR.
Alle RAENIL-Transformer nehmen canonical_theme_linear_v1 als Input
und erzeugen gespiegelte / invertierte Variants.
Typischer Anwendungsfall: automatisch abgeleitete Dark-Mode-Themes, RTL-Layouts,
Inversvarianten für Print.
Erzeugt eine horizontal gespiegelte Layout-Variante. Anwendungsfall: RTL-Sprachen (Arabisch, Hebräisch), oder algorithmisch erzeugte "Mirror-Screens" für Split-View-Interfaces.
Processors im Detail
| Processor | Was er tut |
|---|---|
flip_horizontal_layouts |
Alle CSS-Flex-/Grid-Direktionen werden horizontal gespiegelt (row → row-reverse, margin-left → margin-right). CSS-Logical Properties werden genutzt wo möglich. |
reverse_reading_direction |
Setzt dir="rtl" am Root-Element, aktualisiert text-align-Regeln, passt Padding/Margin-Richtungs-Tokens an. |
invert_spatial_hierarchy |
Navigations-Hierarchien die links→rechts gehen werden zu rechts→links gespiegelt. Z-Index-Stacking und Float-Richtungen werden synchronisiert. |
mirror_animations |
CSS-Animations (translateX, slideIn) werden horizontal invertiert (positiver X → negativer X). Bidirekionale Animationen bleiben unverändert. |
Invertiert die komplette Farbpalette algorithmisch für Dark-Mode oder High-Contrast-Varianten. Die semantischen Bedeutungen (Danger, Success, Warning) werden neu zugeordnet — nicht nur numerisch invertiert.
Processors im Detail
| Processor | Was er tut | Beispiel |
|---|---|---|
invert_hex_values |
Numerische HSL-Inversion aller Farbwerte. Nicht naiv (255-R, 255-G, 255-B) sondern HSL-basiert mit Luminanz-Erhalt für Lesbarkeit. | #1a2b3c → #e5d4c3 |
swap_semantic_meanings |
Semantische Token-Umkehrung: --iio-surface ↔ --iio-ink, --iio-ok-bg ↔ --iio-ok. Stellt sicher dass Danger/Success/Warning ihre Bedeutung behalten. |
--iio-surface: dark |
reverse_contrast_order |
Prüft WCAG 2.1 AA Kontrastverhältnis nach Inversion. Falls < 4.5:1 → automatische Luminanz-Korrektur. Kein Deploy mit unzureichendem Kontrast. | min. 4.5:1 (AA) |
Spiegelt die Typografie-Konfiguration für bidirektionale und RTL-Layouts.
Arbeitet mit dem Ergebnis von abstract_typography
aus dem LINEAR-Transformer.
Processors im Detail
| Processor | Was er tut |
|---|---|
reverse_text_direction_visual |
Passt visuelle Typografie-Richtung an: text-align: right als Default, letter-spacing-Anpassungen für RTL-Zeichensätze, Zeilenbrechen-Regeln für RTL. |
| (Profil-abhängige Processor) | Je nach profiles/*.yml Konfiguration können weitere Processor aktiviert sein: swap_quote_marks (z.B. »« statt ""), adjust_line_height_rtl, remap_font_stack_rtl. |
4 · Vollständiges Processor-Verzeichnis
Alle bekannten Processors alphabetisch mit Transformer-Zuordnung und Stage.
| Processor | Transformer | ETL Stage | Kategorie |
|---|---|---|---|
abstract_typography | theme_linear_source_discovery | Stage 4 | Canonicalize |
adjust_line_height_rtl | theme_raenil_mirror_typography | Stage 4 | Mirror / optional |
branch_dark_light_variants | theme_linear_logo_monochromization | Stage 3 | Asset Transform |
categorize_components | theme_linear_source_discovery | Stage 4 | Canonicalize |
detect_logo_background_classes | theme_linear_logo_monochromization | Stage 3 | Asset Transform |
emit_theme_runtime_logo_manifest | theme_linear_logo_monochromization | Stage 3 | Manifest / SBOM |
extract_connected_foreground | theme_linear_logo_monochromization | Stage 3 | Asset Transform |
flip_horizontal_layouts | theme_raenil_mirror_layout | Stage 4 | Mirror |
generate_custom_properties | theme_linear_to_css_variables | Stage 5 | Render |
generate_monochrome_variants | theme_linear_logo_monochromization | Stage 3 | Asset Transform |
invert_hex_values | theme_raenil_invert_colors | Stage 4 | Mirror |
invert_spatial_hierarchy | theme_raenil_mirror_layout | Stage 4 | Mirror |
map_layout_grid | theme_linear_source_discovery | Stage 4 | Canonicalize |
mirror_animations | theme_raenil_mirror_layout | Stage 4 | Mirror |
normalize_color_syntax | theme_linear_source_discovery | Stage 4 | Canonicalize |
optimize_for_browsers | theme_linear_to_css_variables | Stage 5 | Render |
preserve_brand_source_trace | (stream-contract transforms) | Stage 4 | Provenance |
remap_font_stack_rtl | theme_raenil_mirror_typography | Stage 4 | Mirror / optional |
reverse_contrast_order | theme_raenil_invert_colors | Stage 4 | Mirror / WCAG |
reverse_reading_direction | theme_raenil_mirror_layout | Stage 4 | Mirror |
reverse_text_direction_visual | theme_raenil_mirror_typography | Stage 4 | Mirror |
swap_quote_marks | theme_raenil_mirror_typography | Stage 4 | Mirror / optional |
swap_semantic_meanings | theme_raenil_invert_colors | Stage 4 | Mirror |
validate_syntax | theme_linear_to_css_variables | Stage 5 | Validation |
5 · Quell-Dateien & Herkunft
Die theme-transformer-map.yml ist aus dem Legacy-Repo
gitlab.intelego.solutions/intelego/ibo importiert und liegt
als Library-Import vor. Drei Fundorte im Workspace:
| Pfad | Status | Kontext |
|---|---|---|
| intelego/migrate/gitlab.intelego.solutions/.../theme-transformer-map.yml | migration | Migration-Snapshot aus Legacy-Repo |
| iio/base/library/imported/.../theme-transformer-map.yml | archive (double-imported) | Library-Doppel-Import (cleanup pending) |
| iio/base/library/imported/gitlab.intelego.solutions-ibo-.../theme-transformer-map.yml | library-import | Kanonischer Library-Eintrag (dieser ist maßgeblich) |
Hinweis: Die Transformer-Definitionen in dieser Seite wurden aus dem Library-Import extrahiert. Bei Änderungen immer den kanonischen Library-Eintrag aktualisieren, nicht die migrate-Kopie. Governance: library-control.html