New design Koala build

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

@@ -4,7 +4,6 @@
     v-model="currentSlide"
     swipeable
     :animated="true"
-    control-color="primary"
     infinite
     @update:model-value="handleSlideChange"
     padding

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

@@ -1,12 +1,14 @@
 <template>
   <div
     v-if="showMessage"
-    class="row q-mt-sm q-pa-sm text-white no-wrap cursor-pointer rounded-borders"
-    :class="[{ 'items-center': collapsed }, messageClass]"
+    class="message-bar tinted-box row q-mt-sm q-pa-sm no-wrap cursor-pointer rounded-borders"
+    :class="{ 'items-center': collapsed }"
     @click="toggleCollapse"
   >
-    <q-icon :name="iconName" size="sm" class="q-mr-xs" />
-    <div :class="{ ellipsis: collapsed }">
+    <div class="flex flex-center q-mr-sm">
+      <q-icon :name="iconName" size="sm" class="message-icon" />
+    </div>
+    <div class="message-text self-center" :class="{ ellipsis: collapsed }">
       {{ message }}
     </div>
   </div>
@@ -34,14 +36,14 @@ const toggleCollapse = () => {
   collapsed.value = !collapsed.value;
 };
 
-const messageClass = computed(() => {
+const messageColor = computed(() => {
   switch (props.type) {
     case 'warning':
-      return 'bg-warning';
+      return 'var(--q-warning)';
     case 'error':
-      return 'bg-negative';
+      return 'var(--q-negative)';
     default:
-      return 'bg-primary';
+      return 'var(--q-primary)';
   }
 });
 
@@ -56,3 +58,17 @@ const iconName = computed(() => {
   }
 });
 </script>
+
+<style scoped>
+.message-bar {
+  --tint-accent: v-bind(messageColor);
+}
+
+.message-text {
+  color: var(--q-text);
+}
+
+.message-icon {
+  color: v-bind(messageColor);
+}
+</style>

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

@@ -172,6 +172,7 @@ const batteryColor = computed(() => mqttStore.batteryColor(props.batteryId));
 .battery-card {
   width: 22em;
   border: none;
+  border-radius: 15px;
 }
 
 .battery-card.has-custom-color {

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

@@ -1,11 +1,12 @@
 <template>
-  <q-btn-group class="q-mt-md">
+  <q-btn-group class="q-mt-md" outline>
     <q-btn
       v-for="mode in batteryModes"
       :key="mode.value"
       :color="batMode.value === mode.value ? 'primary' : 'grey'"
       :label="mode.label"
       :icon="mode.icon"
+      :outline="batMode.value !== mode.value"
       size="sm"
       @click="batMode.value = mode.value"
     >

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

@@ -326,6 +326,7 @@ const chargePointColor = computed(() =>
 .charge-point-card {
   width: 22em;
   border: none;
+  border-radius: 15px;
 }
 
 .charge-point-card.has-custom-color {

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

@@ -49,14 +49,14 @@
           v-else
           class="row items-center justify-center q-ma-none q-pa-none no-wrap"
         >
-          <q-btn-group class="col">
+          <q-btn-group class="col" outline>
             <q-btn
               v-for="mode in limitModes"
               :key="mode.value"
               :color="limitMode.value === mode.value ? 'primary' : 'grey'"
               :label="mode.label"
               :disable="mode.value === 'soc' && !vehicleSocType"
-              :outline="mode.value === 'soc' && !vehicleSocType"
+              :outline="mode.value !== limitMode.value"
               size="sm"
               class="col"
               @click="limitMode.value = mode.value"

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

@@ -26,12 +26,13 @@
       Anzahl Phasen bei Überschuss
     </div>
     <div class="row items-center justify-center q-ma-none q-pa-none no-wrap">
-      <q-btn-group class="col">
+      <q-btn-group class="col" outline>
         <q-btn
           v-for="option in phaseOptions"
           :key="option.value"
           :color="numPhases === option.value ? 'primary' : 'grey'"
           :label="option.label"
+          :outline="numPhases !== option.value"
           size="sm"
           class="col"
           @click="numPhases = option.value"

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

@@ -21,12 +21,13 @@
   <div v-if="acChargingEnabled">
     <div class="text-subtitle2 q-mt-sm q-mr-sm">Anzahl Phasen</div>
     <div class="row items-center justify-center q-ma-none q-pa-none no-wrap">
-      <q-btn-group class="col">
+      <q-btn-group class="col" outline>
         <q-btn
           v-for="option in phaseOptions"
           :key="option.value"
           :color="numPhases.value === option.value ? 'primary' : 'grey'"
           :label="option.label"
+          :outline="numPhases.value !== option.value"
           size="sm"
           class="col"
           @click="numPhases.value = option.value"

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

@@ -10,7 +10,7 @@
       size="md"
       dropdown-icon="none"
       cover
-      push
+      content-class="charge-mode-dropdown-menu"
     >
       <q-list>
         <template v-for="(mode, index) in chargeModes" :key="mode.value">
@@ -19,7 +19,6 @@
             v-close-popup
             @click="chargeMode.value = mode.value"
             :active="chargeMode.value === mode.value"
-            active-class="bg-primary text-white"
           >
             <q-item-section class="text-center text-weight-bold">
               <q-item-label>{{ mode.label.toLocaleUpperCase() }}</q-item-label>
@@ -30,9 +29,10 @@
       </q-list>
     </q-btn-dropdown>
   </div>
-  <q-btn-group v-else class="row col q-mt-sm" spread>
+  <q-btn-group v-else class="row col q-mt-sm" spread outline>
     <q-btn
       v-for="mode in chargeModes"
+      :outline="chargeMode.value !== mode.value"
       :key="mode.value"
       :color="chargeMode.value === mode.value ? 'primary' : 'grey'"
       :label="mode.label"
@@ -72,4 +72,7 @@ const currentModeLabel = computed(
   padding: 0;
   margin: 0;
 }
+.charge-mode-dropdown-menu .q-item--active {
+  color: var(--q-primary);
+}
 </style>

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

@@ -26,12 +26,13 @@
   <div v-if="acChargingEnabled">
     <div class="text-subtitle2 q-mt-sm q-mr-sm">Anzahl Phasen</div>
     <div class="row items-center justify-center q-ma-none q-pa-none no-wrap">
-      <q-btn-group class="col">
+      <q-btn-group class="col" outline>
         <q-btn
           v-for="option in phaseOptions"
           :key="option.value"
           :color="numPhases.value === option.value ? 'primary' : 'grey'"
           :label="option.label"
+          :outline="numPhases.value !== option.value"
           size="sm"
           class="col"
           @click="numPhases.value = option.value"
@@ -75,12 +76,13 @@
         Anzahl Phasen Mindest-SoC
       </div>
       <div class="row items-center justify-center q-ma-none q-pa-none no-wrap">
-        <q-btn-group class="col">
+        <q-btn-group class="col" outline>
           <q-btn
             v-for="option in phaseOptionsMinSoc"
             :key="option.value"
             :color="numPhasesMinSoc.value === option.value ? 'primary' : 'grey'"
             :label="option.label"
+            :outline="numPhasesMinSoc.value !== option.value"
             size="sm"
             class="col"
             @click="numPhasesMinSoc.value = option.value"

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

@@ -1,9 +1,10 @@
 <template>
   <q-btn
+    flat
     no-caps
     align="center"
-    class="cursor-pointer"
-    :color="planActive.value ? 'positive' : 'negative'"
+    class="scheduled-plan-button tinted-box cursor-pointer"
+    :class="planActive.value ? 'is-active' : 'is-inactive'"
     @click="$emit('editPlan', plan)"
   >
     <ChargePointScheduledPlanSummary
@@ -33,3 +34,16 @@ const planActive = computed(() =>
   ),
 );
 </script>
+
+<style scoped lang="scss">
+.scheduled-plan-button.is-active {
+  --tint-accent: var(--q-positive);
+}
+.scheduled-plan-button.is-inactive {
+  --tint-accent: var(--q-negative);
+}
+.scheduled-plan-button {
+  --tint-amount: 30%;
+  --tint-text: color-mix(in srgb, var(--q-text) 90%, transparent);
+}
+</style>

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

@@ -31,22 +31,25 @@
       <q-separator />
       <div class="q-mb-sm">
         <div class="text-subtitle2 q-mb-sm q-mt-sm">Wiederholungen</div>
-        <q-btn-group spread>
+        <q-btn-group outline spread>
           <q-btn
             size="sm"
             :color="planFrequency.value === 'once' ? 'primary' : 'grey'"
+            :outline="planFrequency.value !== 'once'"
             @click="planFrequency.value = 'once'"
             label="Einmalig"
           />
           <q-btn
             size="sm"
             :color="planFrequency.value === 'daily' ? 'primary' : 'grey'"
+            :outline="planFrequency.value !== 'daily'"
             @click="planFrequency.value = 'daily'"
             label="Täglich"
           />
           <q-btn
             size="sm"
             :color="planFrequency.value === 'weekly' ? 'primary' : 'grey'"
+            :outline="planFrequency.value !== 'weekly'"
             @click="planFrequency.value = 'weekly'"
             label="Wöchentlich"
           />
@@ -96,7 +99,7 @@
           />
         </div>
         <div
-          class="row q-mt-sm q-pa-sm text-white no-wrap items-center bg-primary rounded-borders"
+          class="info-box tinted-box row q-mt-sm q-pa-sm no-wrap items-center rounded-borders"
         >
           <q-icon name="info" size="sm" class="q-mr-xs" />
           <ChargePointScheduledPlanSummary
@@ -131,12 +134,13 @@
         <div
           class="row items-center justify-center q-ma-none q-pa-none no-wrap"
         >
-          <q-btn-group class="col">
+          <q-btn-group class="col" outline>
             <q-btn
               v-for="option in phaseOptions"
               :key="option.value"
               :color="planNumPhases.value === option.value ? 'primary' : 'grey'"
               :label="option.label"
+              :outline="planNumPhases.value !== option.value"
               size="sm"
               class="col"
               @click="planNumPhases.value = option.value"
@@ -149,14 +153,15 @@
         <div
           class="row items-center justify-center q-ma-none q-pa-none no-wrap"
         >
-          <q-btn-group class="col">
+          <q-btn-group class="col" outline>
             <q-btn
               v-for="option in phaseOptions"
               :key="option.value"
               :color="
                 planNumPhasesPv.value === option.value ? 'primary' : 'grey'
               "
               :label="option.label"
+              :outline="planNumPhasesPv.value !== option.value"
               size="sm"
               class="col"
               @click="planNumPhasesPv.value = option.value"
@@ -165,18 +170,20 @@
         </div>
       </div>
       <div class="text-subtitle2 q-mt-sm q-mr-sm">Ziel</div>
-      <q-btn-group class="full-width">
+      <q-btn-group class="full-width" outline>
         <q-btn
           size="sm"
           class="flex-grow"
           :color="planLimitSelected.value === 'soc' ? 'primary' : 'grey'"
+          :outline="planLimitSelected.value !== 'soc'"
           @click="planLimitSelected.value = 'soc'"
           label="EV-SoC"
         />
         <q-btn
           size="sm"
           class="flex-grow"
           :color="planLimitSelected.value === 'amount' ? 'primary' : 'grey'"
+          :outline="planLimitSelected.value !== 'amount'"
           @click="planLimitSelected.value = 'amount'"
           label="Energie"
         />
@@ -480,4 +487,12 @@ const chargeTemplateId = computed(
 .flex-grow {
   flex-grow: 1;
 }
+
+.info-box {
+  --tint-accent: var(--q-primary);
+  --tint-text: color-mix(in srgb, var(--q-text) 80%, transparent);
+}
+.info-box :deep(.q-icon) {
+  color: var(--q-primary);
+}
 </style>

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

@@ -1,9 +1,10 @@
 <template>
   <q-btn
+    flat
     no-caps
     align="center"
-    class="cursor-pointer"
-    :color="planActive.value ? 'positive' : 'negative'"
+    class="scheduled-plan-button cursor-pointer"
+    :class="planActive.value ? 'is-active' : 'is-inactive'"
     @click="$emit('editPlan', plan)"
   >
     <div class="column">
@@ -148,4 +149,16 @@ const formattedDateRange = computed(() => {
 .plan-details > div:not(:last-child) {
   margin-right: #{map-get($space-sm, x)};
 }
+
+.scheduled-plan-button.is-active {
+  --plan-state: var(--q-positive);
+}
+.scheduled-plan-button.is-inactive {
+  --plan-state: var(--q-negative);
+}
+.scheduled-plan-button {
+  background-color: color-mix(in srgb, var(--plan-state) 30%, transparent);
+  border: 1px solid color-mix(in srgb, var(--q-text) 35%, transparent);
+  color: color-mix(in srgb, var(--q-text) 90%, transparent);
+}
 </style>