scripting system, hue fixes and such

frontend/src/lib/components/Lamp.svelte

@@ -1,8 +1,14 @@
+<script lang="ts" context="module">
+  export const DARK_COLOR = rgb(0.5176470588235295/2, 0.5333333333333333/2, 0.5607843137254902/1.75);
+  export const DARK_COLOR_SELECTED = rgb(0.5176470588235295/1.5, 0.5333333333333333/1.5, 0.5607843137254902/1.25);
+</script>
+
 <script lang="ts">
 	import { getSelectedContext } from "$lib/contexts/SelectContext.svelte";
 	import type Device from "$lib/models/device";
 	import { SupportFlags } from "$lib/models/device";
 	import { rgb, type ColorRGB } from "../models/color";
+	import Icon from "./Icon.svelte";
 
   export let device: Device;
 
@@ -85,21 +91,25 @@
       displayTitle = deviceTitle;
     }
   }
+
+  let darkColor: ColorRGB;
+  $: darkColor = $selectedMap[device.id] ? DARK_COLOR_SELECTED : DARK_COLOR
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="lamp" class:selected={$selectedMap[device.id]} on:click={onSelect}>
   <div class="row">
-    {#if iconColor != null}
-      <div style="background-color: rgb({iconColor.red*255},{iconColor.green*255},{iconColor.blue*255})" class="roundboi"></div>
-    {:else}
-      <div style="background-color: #223)" class="roundboi">
-        {#if !!roundboiText}
-          <div class="roundboi-text">{roundboiText}</div>
-        {/if}
-      </div>
-    {/if}
-
+    <div class="row-icon">
+      {#if iconColor != null}
+        <Icon name={device.hwMetadata?.icon||"generic_ball"} brightColor={iconColor} darkColor={darkColor} />
+      {:else}
+        <Icon name={device.hwMetadata?.icon||"generic_ball"} brightColor={darkColor} darkColor={darkColor}>
+          {#if !!roundboiText}
+            <div class="roundboi-text">{roundboiText}</div>
+          {/if}
+        </Icon>
+      {/if}
+    </div>
     <div class="title">{displayTitle}</div>
   </div>
   <div class="flatboi">
@@ -132,25 +142,26 @@
     > div.row 
       display: flex
 
-      > div.roundboi
-        width: 1.25em
-        height: 1.25em
-        margin-left: 0.25em
-        margin-top: 0.30em
-        border-radius: 2em
-        box-sizing: border-box
-        border: 0.5px solid #000
+      > div.row-icon
+        font-size: 1.8em
+        position: absolute
+        width: 0
+        height: 0
 
-        > div.roundboi-text
-          color: #abc
-          margin-top: 0.2em
-          font-size: 0.8em
+        div.roundboi-text
+          width: 0
+          height: 0
+          left: 1.4ch
+          top: 0.9em
+          text-align: center
+          position: absolute
+          font-size: 0.333em
 
       > div.title
         font-size: 0.9em
         text-align: left
         margin-top: 0.4em
-        margin-left: 0.75ch
+        margin-left: 2em
         margin-right: 1ch
         height: 1.6em