Koala new design custom colors update

packages/modules/web_themes/koala/source/src/components/BatteryCard.vue

@@ -5,7 +5,6 @@
     :class="{
       'battery-sum': props.batteryId === -1,
       'full-height': props.fullHeight,
-      'has-custom-color': batteryColor,
     }"
   >
     <q-card-section class="row no-wrap items-center justify-between">
@@ -164,8 +163,6 @@ const dailyExportedEnergy = computed(() => {
     '---'
   );
 });
-
-const batteryColor = computed(() => mqttStore.batteryColor(props.batteryId));
 </script>
 
 <style scoped lang="scss">
@@ -175,10 +172,6 @@ const batteryColor = computed(() => mqttStore.batteryColor(props.batteryId));
   border-radius: 15px;
 }
 
-.battery-card.has-custom-color {
-  border-left: 4px solid v-bind(batteryColor);
-}
-
 .q-card__section {
   padding-left: $space-base;
   padding-right: $space-base;

packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue

@@ -223,8 +223,6 @@ const secondaryCountersConfigured = computed(
   () => secondaryCounterData.value.length > 0,
 );
 
-const gridID = computed(() => mqttStore.gridId);
-
 const gridData = computed((): DailyTotalsItem => {
   let data: DailyTotalsItem = {
     id: 'grid',
@@ -243,10 +241,7 @@ const gridData = computed((): DailyTotalsItem => {
         imported: mqttStore.counterDailyImported('textValue') as string,
         exported: mqttStore.counterDailyExported('textValue') as string,
       },
-      color:
-        gridID.value !== undefined
-          ? mqttStore.gridComponentColor(gridID.value) || undefined
-          : undefined,
+      color: 'var(--q-grid-stroke)',
     };
   }
   return data;
@@ -268,7 +263,7 @@ const secondaryCounterData = computed((): DailyTotalsItem[] => {
           imported: mqttStore.counterDailyImported('textValue', id) as string,
           exported: mqttStore.counterDailyExported('textValue', id) as string,
         },
-        color: mqttStore.gridComponentColor(id) || undefined,
+        color: mqttStore.gridComponentColor(id) || 'var(--q-secondary-counter-stroke)',
       });
     }
   });
@@ -297,7 +292,7 @@ const individualChargePointData = computed((): DailyTotalsItem[] => {
             id,
           ) as string,
         },
-        color: mqttStore.chargePointColor(id) || undefined,
+        color: mqttStore.chargePointColor(id) || 'var(--q-charge-point-stroke)',
       });
     }
   });
@@ -322,7 +317,7 @@ const individualBatteryData = computed((): DailyTotalsItem[] => {
           imported: mqttStore.batteryDailyImported(id, 'textValue') as string,
           exported: mqttStore.batteryDailyExported(id, 'textValue') as string,
         },
-        color: mqttStore.batteryColor(id) || undefined,
+        color: 'var(--q-battery-stroke)',
       });
     }
   });
@@ -348,10 +343,8 @@ const componentData = computed((): DailyTotalsItem[] => {
         imported: mqttStore.batteryDailyImportedTotal('textValue') as string,
         exported: mqttStore.batteryDailyExportedTotal('textValue') as string,
       },
+      color: 'var(--q-battery-stroke)',
     };
-    if (mqttStore.batteryIds.length === 1) {
-      item.color = mqttStore.batteryColor(mqttStore.batteryIds[0]) || undefined;
-    }
     components.push(item);
   }
 
@@ -364,7 +357,7 @@ const componentData = computed((): DailyTotalsItem[] => {
       power: mqttStore.getPvPower('textValue') as string,
       powerValue: mqttStore.getPvPower('value') as number,
       today: { exported: mqttStore.pvDailyExported('textValue') as string },
-      color: mqttStore.pvAggregateColor || 'var(--q-diagram-icon)',
+      color: 'var(--q-pv-stroke)',
     });
   }
 
@@ -377,6 +370,7 @@ const componentData = computed((): DailyTotalsItem[] => {
       power: mqttStore.homePower('textValue') as string,
       powerValue: mqttStore.homePower('value') as number,
       today: { imported: mqttStore.homeDailyYield('textValue') as string },
+      color: 'var(--q-home-stroke)',
     });
   }
 
@@ -386,6 +380,11 @@ const componentData = computed((): DailyTotalsItem[] => {
       title: mqttStore.chargePointIds.length > 1 ? 'Ladepunkte' : 'Ladepunkt',
       level: 'primary',
       icon: 'chargepoint',
+      color:
+        mqttStore.chargePointIds.length === 1
+          ? mqttStore.chargePointColor(mqttStore.chargePointIds[0]) ||
+            'var(--q-charge-point-stroke)'
+          : 'var(--q-charge-point-stroke)',
     };
     if (chargePointSumPowerAvailable.value) {
       item = {
@@ -397,10 +396,6 @@ const componentData = computed((): DailyTotalsItem[] => {
           exported: mqttStore.chargePointDailyExported('textValue') as string,
         },
       };
-      if (mqttStore.chargePointIds.length === 1) {
-        item.color =
-          mqttStore.chargePointColor(mqttStore.chargePointIds[0]) || undefined;
-      }
     }
     components.push(item);
   }

packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotalsRow.vue

@@ -181,7 +181,6 @@ const iconMap = {
 .base-icon {
   width: 1.75rem;
   height: 1.75rem;
-  color: var(--q-diagram-icon);
 }
 .col-title {
   flex: 0 0 5.5rem;