webui stuff

webui/src/primitives/Elements.sass

@@ -0,0 +1,17 @@
+@import "../res/colors"
+
+.Element
+  display: inline-block
+  padding: 0.2em 0.5ch
+  cursor: pointer
+
+.Element:hover
+  background-color: $color-background-elevated
+
+.ColorElement-block
+  vertical-align: text-top
+  display: inline-block
+  width: 1em
+  height: 1em
+  border-radius: 5px
+  margin-right: 0.5ch

webui/src/primitives/Elements.tsx

@@ -0,0 +1,47 @@
+import React, {CSSProperties, useMemo} from "react";
+import {ColorValue} from "../models/Colors";
+// @ts-ignore
+import kelvinToRgb from "kelvin-to-rgb";
+
+import "./Elements.sass";
+import {kelvinToColorValue, kelvinToRgbHex} from "../helpers/kelvin";
+
+function Element({children}: React.PropsWithChildren<{}>) {
+  return (
+    <div className="Element">{children}</div>
+  )
+}
+
+interface ColorElementProps {
+  name: string
+  value: ColorValue | "hs-gradient" | "k-gradient"
+}
+
+export function ColorElement({name, value}: ColorElementProps) {
+  const style: CSSProperties = useMemo(() => {
+    const s: CSSProperties = {};
+
+    if (value === "hs-gradient") {
+      s.backgroundImage = "linear-gradient(to bottom right, red, yellow, green, blue, violet)";
+    } else if (value === "k-gradient") {
+      s.backgroundImage = "linear-gradient(to bottom right, #ff9329, #ffd6aa, #fffaf4, #fff, #c9e2ff, #40a3ff)";
+    } else if (value.kelvin !== undefined && value.kelvin > 0) {
+      s.backgroundColor = kelvinToRgbHex(value.kelvin);
+    } else {
+      const hue = value.h || 0;
+      const sat = Math.floor((value.s || 0) * 100);
+
+      s.backgroundColor = `hsl(${hue}, ${sat}%, 50%)`;
+    }
+    return s;
+  }, [value]);
+
+  return (
+    <Element>
+      <div className="ColorElement-block"
+           style={style}
+      />
+      {name}
+    </Element>
+  );
+}