Koala new design update - Energy flow chart

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

@@ -586,7 +586,7 @@ watch(
 .card {
   border-radius: 0.5rem;
   background: var(--q-card-background);
-  filter: drop-shadow(0 0 0.15rem var(--q-shadow));
+  filter: drop-shadow(0 0 0.15rem var(--q-chart-shadow));
   margin-bottom: 0.25rem;
 }
 

packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue

@@ -46,6 +46,10 @@ const svgViewBox = computed(
     `${svgSize.value.xMin} ${svgSize.value.yMin} ${svgSize.value.xMax} ${svgSize.value.yMax}`,
 );
 
+// The icon circle sits inside the label pill (pill radius = circleRadius);
+// the inset leaves a visible gap between circle and pill edge.
+const iconCircleRadius = computed(() => svgSize.value.circleRadius - 2);
+
 const svgIconWidth = computed(() => svgSize.value.circleRadius);
 
 const svgIconHeight = computed(() => svgSize.value.circleRadius);
@@ -702,7 +706,7 @@ const labelClipPath = computed(() => {
           height="200%"
           filterUnits="objectBoundingBox"
         >
-          <feDropShadow dx="0" dy="0" stdDeviation="1" />
+          <feDropShadow dx="1.3" dy="1.3" stdDeviation="1.5" />
         </filter>
       </defs>
 
@@ -757,9 +761,9 @@ const labelClipPath = computed(() => {
             >
               <rect
                 :x="-svgSize.circleRadius - svgSize.strokeWidth"
-                :y="(svgSize.circleRadius - 1) * (1 - 2 * component.soc)"
+                :y="iconCircleRadius * (1 - 2 * component.soc)"
                 :width="(svgSize.circleRadius + svgSize.strokeWidth) * 2"
-                :height="(svgSize.circleRadius - 1) * 2 * component.soc"
+                :height="iconCircleRadius * 2 * component.soc"
               />
             </clipPath>
             <clipPath :id="`clip-label-${component.id}`">
@@ -846,7 +850,7 @@ const labelClipPath = computed(() => {
             <circle
               cx="0"
               cy="0"
-              :r="svgSize.circleRadius - 1"
+              :r="iconCircleRadius"
               filter="url(#flow-box-shadow)"
             />
             <!-- SoC fill: radius must match the clip-soc reference above so the
@@ -857,7 +861,7 @@ const labelClipPath = computed(() => {
               :class="{ soc: component.soc !== undefined }"
               cx="0"
               cy="0"
-              :r="svgSize.circleRadius - 1"
+              :r="iconCircleRadius"
               :clip-path="`url(#clip-soc-${component.id})`"
               :fill="`url(#gradient-soc-${component.id})`"
             />
@@ -897,7 +901,7 @@ svg {
 .flow-base {
   fill: none;
   stroke: var(--q-secondary);
-  stroke-width: 0.75;
+  stroke-width: 0.4;
   stroke-linecap: round;
   stroke-linejoin: round;
   transition: stroke 0.5s;
@@ -1029,8 +1033,8 @@ rect {
 
 /* Drop shadow by way of feDropShadow for browser compatibility (safari webkit) */
 feDropShadow {
-  flood-color: var(--q-shadow);
-  flood-opacity: 1;
+  flood-color: var(--q-flow-chart-shadow);
+  flood-opacity: var(--q-flow-chart-shadow-opacity);
 }
 
 text {

packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue

@@ -466,7 +466,7 @@ const chartOptions = computed<ChartOptions<'line'>>(() => ({
   flex-direction: column;
   background: var(--q-card-background);
   border-radius: 15px;
-  filter: drop-shadow(0 0 0.3rem var(--q-shadow));
+  filter: drop-shadow(0 0 0.3rem var(--q-chart-shadow));
 }
 
 .legend-wrapper {

packages/modules/web_themes/koala/source/src/css/quasar.variables.scss

@@ -56,6 +56,11 @@ $vehicle-fill: #4f99af;
 $charge-plan-link-button: #6b757d;
 $diagram-icon: #717171;
 $table-hover: #f9f8f8;
+// history chart and daily totals cards (--q-shadow stays for everything else)
+$chart-shadow: $secondary;
+// energy flow chart: shadow behind the pills and the icon circles
+$flow-chart-shadow: #000000;
+$flow-chart-shadow-opacity: 0.12;
 // Light theme (default)
 :root {
   --q-primary: #{$primary};
@@ -71,6 +76,9 @@ $table-hover: #f9f8f8;
   --q-card-background: #{$background};
   --q-list: color-mix(in srgb, var(--q-grey) 5%, transparent);
   --q-shadow: #{$secondary};
+  --q-chart-shadow: #{$chart-shadow};
+  --q-flow-chart-shadow: #{$flow-chart-shadow};
+  --q-flow-chart-shadow-opacity: #{$flow-chart-shadow-opacity};
   --q-text: #{$light-text};
   --q-white: #{$white};
   --q-grey: #{$grey};
@@ -228,6 +236,11 @@ $table-hover: #f9f8f8;
 $dark-primary: #2aa8ff;
 $dark-secondary: #3b3b3d; //cards - tabs background tables
 $dark-shadow: #7a7c80; // shadow color for dark theme
+// history chart and daily totals cards (--q-shadow stays for everything else)
+$dark-chart-shadow: #000000;
+// energy flow chart: shadow behind the pills and the icon circles
+$dark-flow-chart-shadow: #000000;
+$dark-flow-chart-shadow-opacity: 0.45;
 $dark-accent: #546e7a;
 $dark-positive: #3e8f5e;
 $dark-negative: #c54d57;
@@ -262,6 +275,9 @@ $dark-table-hover: #ffffff12;
   --q-card-background: #{$dark-secondary};
   --q-list: #{$dark-secondary}; // drawer, list background
   --q-shadow: #{$dark-shadow};
+  --q-chart-shadow: #{$dark-chart-shadow};
+  --q-flow-chart-shadow: #{$dark-flow-chart-shadow};
+  --q-flow-chart-shadow-opacity: #{$dark-flow-chart-shadow-opacity};
   --q-text: #{$dark-text};
   --q-white: #{$white};
   --q-grey: #{$grey};