Koala new design custom colors update

[Brett-S-OWB]

Farben gemäß dem neuen Design aktualisiert
Benutzerdefinierte Farben für EVU, PV und Speicher entfernt
Textfarbe im Energieflussdiagramm an die jeweilige Symbolfarbe angepasst
Clip-Path für die Textanimation angepasst, sodass der Text bei der Animation von Ladepunkt und Fahrzeug korrekt ausgeblendet wird
Spaltenabstände im Energieflussdiagramm für größere Bildschirme vergrößert
Schriftart im Energieflussdiagramm aktualisiert

[Copilot]

Pull request overview

Aktualisiert das Koala-Theme gemäß neuem Design: zentrale Farbanpassungen über Quasar-Variablen, Entfernen von benutzerdefinierten Farben für bestimmte Komponenten (EVU/PV/Speicher) sowie UI-Anpassungen im Energieflussdiagramm (Textfarben, Clip-Path, Spaltenabstände, Schriftart).

Changes:

• Entfernt Battery-/PV-Farb-APIs aus dem MQTT-Store und passt abhängige Charts auf Theme-Variablen um.
• Aktualisiert Quasar Theme-Variablen (inkl. neuer --q-vehicle-fill) und reduziert Tint-Intensität.
• Überarbeitet Energieflussdiagramm (responsive Breite/Spaltenabstände, Clip-Path für Textanimation, Roboto, dynamische Textfarbe passend zum Symbol).

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts	Entfernt PV-/Battery-Farb-Exports (Aggregate/Custom) aus Store-API.
packages/modules/web_themes/koala/source/src/css/quasar.variables.scss	Neue Design-Farben, ergänzt --q-vehicle-fill, Anpassung Tint-Amount.
packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue	Nutzt Theme-Farben statt Store-Aggregate-Farben für Grid/PV/Battery.
packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue	Responsive Chartbreite, neuer Clip-Path, Textfarbe an Symbolfarbe, Roboto, Iconfarben angepasst.
packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/energy-flow-chart-models.ts	ComponentClass: ersetzt valueLabel durch optionales valueLabelColor.
packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotalsRow.vue	Entfernt feste Icon-Farbe aus CSS (Farbe kommt per Inline-Style).
packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue	Setzt mehrere Komponentenfarben auf Theme-Variablen, entfernt Grid-ID-Farbableitung.
packages/modules/web_themes/koala/source/src/components/BatteryCard.vue	Entfernt Styling für benutzerdefinierte Battery-Farbe (Border-left).

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Brett-S-OWB]

Build-Dateien waren hier nur erzeugt um das experimental Branch anzushauen, sie werden neu erzeugt beim merge in Master branch

[benderl]

Die beiden (inzwischen etwas unübersichtlichen) Ausdrücke für header-class und secondaryComponentsConfigured sehen unterschiedlich aus, erreichen jedoch das selbe Ergebnis. Für Zähler gibt es die selbe Logik als Computed Property secondaryCountersConfigured. Für Ladepunkte gibt es chargePointConfigured. Höchste Zeit, ein zentrales Computed Property dafür einzuführen. ;-)

Vorschlag:

const secondaryComponentsConfigured = computed(() => {
  return (componentType: string): boolean => {
    switch (componentType) {
      case 'counter':
        return secondaryCounterData.value.length > 0;
      case 'chargepoint':
        return individualChargePointData.value.length > 1;
      case 'battery':
        return individualBatteryData.value.length > 1;
      case 'pv':
        return individualPvData.value.length > 1;
      default:
        return false;
    }
  };
});

[Brett-S-OWB]

central computed Funktion implementiert.

[benderl]

In der Datei sind insgesamt 6 Farben fest als String hinterlegt. Siehst Du eine Möglichkeit, das hier zu entfernen und auf die globalen Farbdefinitionen aus quasar.variables.scss zuzugreifen?

[Brett-S-OWB]

Die sechs fest hinterlegten Farben sind die Bootstrap-Standardfarben, die das Backend in die Konfiguration schreibt (aus der Settings UI). Sie unterscheiden sich daher bewusst von den Koala-Farben. In resolveComponentColor dienen sie lediglich als Sentinel-Werte: Wenn die gespeicherte Farbe dem Standardwert entspricht, geben wir null zurück, sodass die Komponente auf die Theme-Variable var(--q-*) zurückfällt.

Aus diesem Grund können die Werte nicht direkt aus quasar.variables.scss übernommen werden – es handelt sich schlicht um andere Farben.

Ein möglicher Ansatz wäre, die Farben im Settings-Projekt auf die Koala-Farben umzustellen, sodass Standard- und Theme-Farben übereinstimmen. Das Problem dabei ist, dass das Backend nur einen statischen Wert speichert, während der Ladepunkt inzwischen unterschiedliche Farben für das Light- und Dark-Theme verwendet (#153357 bzw. #3874db), nachdem ich die Ladepunkt-Farbe für das Dark-Theme angepasst habe. Ein statischer Backend-Wert kann beide Varianten nicht abbilden, sodass der Fallback über var(--q-*) weiterhin erforderlich wäre.

Mein Vorschlag wäre daher, die sechs Werte in einer zentralen Konstante (z. B. einer SETTINGS_UI_COLORS_-Map) zusammenzufassen. Dadurch würden die verstreuten String-Literale verschwinden und es gäbe eine einzige Quelle der Wahrheit, ohne die Erkennungslogik oder das Backend ändern zu müssen.