Issue 29 colors

.github/workflows/docker-publish.yml

@@ -2,7 +2,9 @@ name: Build and publish Docker container
 
 on:
   push:
-    branches: [ "master" ]
+    branches:
+      - master
+      - develop
     # Publish semver tags as releases.
     tags: [ 'v*.*.*' ]
   pull_request:
@@ -37,11 +39,17 @@ jobs:
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Extract Docker metadata
+      - name: Docker meta
         id: meta
-        uses: docker/metadata-action@c1e51972afc2121e065aed6d45c65596fe445f3f # v5.8.0
+        uses: docker/metadata-action@v5
         with:
           images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: |
+            type=semver,pattern={{raw}},enable={{is_default_branch}}
+            type=ref,event=branch
+            type=ref,event=tag
+            type=ref,event=pr
+            type=raw,value=latest,enable={{is_default_branch}}
 
       - name: Build and push Docker image
         id: build-and-push

app/lib/jinja.py

@@ -153,4 +153,9 @@ def now():
     return arrow.utcnow()
 
 
+@jglobal()
+def js_color(name):
+    return Markup(f'<span class="js-color {name}"></span>')
+
+
 jglobal()(users_enabled)

app/screens/openweather/jinja.py

@@ -94,6 +94,13 @@ def weather_convert(value, to_units, what, d=2, from_units='standard'):
     return Markup(f'{value} <span class="suffix">{suffix}</span>')
 
 
+@jfilter()
+@jglobal()
+def wi(name, extra_class=''):
+    url = url_for('fruitstand_openweather.static', filename=f'images/{name}.svg')
+    return Markup(f'<img class="inline-svg wi {name} {extra_class}" src="{url}">')
+
+
 @jglobal()
 def get_conditions_image(forecast):
     """\
@@ -330,4 +337,4 @@ def get_conditions_image(forecast):
         else:
             image_name = 'wi-na'
 
-    return url_for('fruitstand_openweather.static', filename=f'images/{image_name}.svg')
+    return image_name

app/screens/openweather/src/js/openweather.js

@@ -56,7 +56,7 @@ import Chart from 'chart.js/auto'
           },
           tooltip: {
             enabled: false
-          }
+          },
         },
         scales: {
           x: {
@@ -117,7 +117,7 @@ import Chart from 'chart.js/auto'
             data: window.graph_data.map(row => row.temp),
             yAxisID: 'yTemp',
             pointStyle: false,
-            borderColor: '#000',
+            borderColor: js_color('.openweather.graph.temperature', 'color'),
             borderWidth: 2,
             order: 1,
           },
@@ -126,7 +126,7 @@ import Chart from 'chart.js/auto'
             label: 'Precipitation',
             data: window.graph_data.map(row => row.precip * 100),
             yAxisID: 'yPercent',
-            backgroundColor: bgPattern(),
+            backgroundColor: js_color('.openweather.graph.precipitation', 'color', bgPattern()),
             order: 2,
           },
           {
@@ -135,8 +135,8 @@ import Chart from 'chart.js/auto'
             data: window.graph_data.map(row => row.humid * 100),
             yAxisID: 'yPercent',
             showLine: false,
-            pointBackgroundColor: '#fff',
-            pointBorderColor: '#000',
+            pointBackgroundColor: js_color('.openweather.graph.humidity', 'background-color', '#fff'),
+            pointBorderColor: js_color('.openweather.graph.humidity', 'color'),
             order: 0,
           },
         ]

app/screens/openweather/src/sass/_graph.scss

@@ -0,0 +1,44 @@
+@use "colors" as *;
+
+// default - hide so not used
+#js_colors {
+    .openweather {
+        &.graph {
+            visibility: hidden;
+        }
+    }
+}
+
+.cs-3b, .cs-3b7 {
+    #js_colors {
+        .openweather {
+            &.graph {
+                visibility: visible;
+                &.humidity {
+                    color: $c-3b-black;
+                    background-color: $c-3b-green;
+                }
+                &.precipitation {
+                    color: $c-3b-blue;
+                }
+            }
+        }
+    }
+}
+
+.cs-16b, .cs-full {
+    #js_colors {
+        .openweather {
+            &.graph {
+                visibility: visible;
+                &.humidity {
+                    color: #444;
+                    background-color: #62e941;
+                }
+                &.precipitation {
+                    color: #4f8eff;
+                }
+            }
+        }
+    }
+}

app/screens/openweather/src/sass/_icons.scss

@@ -0,0 +1,166 @@
+@use "colors" as *;
+
+svg {
+    // Default fill; suitable for B&W
+    path {
+        fill: black;
+    }
+}
+
+.cs-3b, .cs-3b7 {
+    svg {
+        #biohazard, #error, #radiation, #fire, #meteor, #flag-gale-1, #flag-gale-2, #flag-hurricane-1, #flag-hurricane-2, #flag-storm-1, #flag-small-craft-advisory-1, #thermometer-inner {
+            fill: $c-3b-red;
+        }
+        #error-text, #warning-text, #eye-pupil, #text, #line, #indicator, #horizon {
+            fill: $c-3b-black;
+        }
+        #eye {
+            fill: $c-3b-green;
+        }
+        #warning, #sun, #lightning, #star {
+            fill: $c-3b-yellow;
+            stroke: black;
+            stroke-width: 2%;
+        }
+        #wind, #dust2, #smoke {
+            fill: $c-3b-black;
+        }
+        #cloud, #hail {
+            fill: $c-3b-black;
+        }
+        #cloud2 {
+            fill: $c-3b-black;
+        }
+        #fog {
+            fill: $c-3b-blue;
+        }
+        #rain {
+            fill: $c-3b-blue;
+        }
+        #haze, #dust, #sand {
+            fill: $c-3b-black;
+        }
+        #lightning2 {
+            fill: $c-3b-yellow;
+        }
+        #sleet {
+            fill: $c-3b-blue;
+        }
+        #snow {
+            fill: $c-3b-blue;
+        }
+        #snowflake {
+            fill: $c-3b-blue;
+        }
+        #fire2 {
+            fill: $c-3b-red;
+        }
+        #water {
+            fill: $c-3b-blue;
+        }
+        #heat {
+            fill: $c-3b-red;
+        }
+        #hurricane {
+            fill: $c-3b-blue;
+        }
+        #moon {
+            fill: $c-3b-black;
+        }
+        #smog {
+            fill: $c-3b-black;
+        }
+        #alien {
+            fill: $c-3b-green;
+        }
+    }
+    .stats-item {
+        .wi-sunrise, .wi-sunset, .wi-day-sunny {
+            background: $c-3b-black;
+            border-radius: 50%;
+            #horizon {
+                fill: $c-3b-white;
+            }
+        }
+        svg {
+            #warning, #sun, #lightning, #star {
+                stroke-width: 0;
+            }
+        }
+    }
+}
+
+.cs-3b7 {
+    svg {
+        #haze, #dust, #sand, #wind {
+            fill: $c-3b7-dkyellow;
+        }
+    }
+}
+
+.cs-16b, .cs-full {
+    svg {
+        #biohazard, #error, #radiation, #fire, #meteor, #flag-gale-1, #flag-gale-2, #flag-hurricane-1, #flag-hurricane-2, #flag-storm-1, #flag-small-craft-advisory-1, #thermometer-inner {
+            fill: red;
+        }
+        #error-text, #warning-text, #eye, #eye-pupil, #text, #line, #indicator, #horizon {
+            fill: black;
+        }
+        #warning, #sun, #lightning, #star {
+            fill: #f6dd38;
+        }
+
+        #wind, #dust2, #smoke {
+            fill: gray;
+        }
+        #cloud, #hail {
+            fill: #ccc;
+        }
+        #cloud2 {
+            fill: #ddd;
+        }
+        #fog {
+            fill: #888;
+        }
+        #rain {
+            fill: #67b1ff;
+        }
+        #haze, #dust, #sand {
+            fill: tan;
+        }
+        #lightning2 {
+            fill: #f6d964;
+        }
+        #sleet {
+            fill: #4a5141;
+        }
+        #snow {
+            fill: #b8d4ff;
+        }
+        #snowflake {
+            fill: #7294ff;
+        }
+        #fire2 {
+            fill: #5f1604;
+        }
+        #water {
+            fill: #0031f7;
+        }
+        #heat {
+            fill: #fc5146;
+        }
+        #hurricane {
+            fill: blue;
+        }
+        #moon {
+            fill: #aae5ff;
+        }
+        #smog {
+            fill: #7f5e49;
+        }
+        #alien {
+            fill: green;
+        }
+    }
+}

app/screens/openweather/src/sass/openweather.scss

@@ -1,4 +1,6 @@
 @use "breakpoints" as *;
+@use "icons";
+@use "graph";
 
 #weather {
     display: block;
@@ -7,12 +9,16 @@
     box-sizing: border-box;
     padding: 0.5em;
 
+    .icon {
+        width: auto;
+    }
+
     // Tiny screens
     .row-2, .loc-forecast {
         display: none;
     }
     .current {
-        img {
+        .icon {
             display: none;
         }
         .details {
@@ -46,7 +52,7 @@
             .current {
                 display: grid;
                 grid-template-columns: repeat(2, 1fr);
-                img {
+                .icon {
                     display: block;
                 }
                 .temp {
@@ -82,7 +88,7 @@
     }
 
     @include bp(xs) {
-        .row-1 .loc-forecast .forecast-item img {
+        .row-1 .loc-forecast .forecast-item .icon {
             max-height: 3em;
         }
     }
@@ -101,7 +107,7 @@
             .current {
                 display: flex;
                 flex-direction: column;
-                img {
+                .icon {
                     max-height: 4em;
                 }
                 .temp {
@@ -162,7 +168,7 @@
                     .icon {
                         display: inline-block;
                         vertical-align: middle;
-                        max-height: 1.5em;
+                        max-height: 1.65em;
                     }
                     .stats-data {
                         display: inline-block;
@@ -191,7 +197,7 @@
                 display: grid;
                 grid-template-columns: repeat(2, 1fr);
                 align-items: center;
-                img {
+                .icon {
                     max-height: unset;
                 }
                 .temp {