measurements can be slightly seen through

Author: Adam Argyle

app/components/selection/distance.element.css

@@ -37,7 +37,8 @@
   color: white;
   text-shadow: 0 0.5px 0 hsla(0, 0%, 0%, 0.4);
   box-shadow: 0 0.5px 0 hsla(0, 0%, 0%, 0.4);
-  background: var(--line-color);
+  background: hsl(var(--line-color) / 75%);
+  border: 1px solid hsl(var(--line-color));
   border-radius: 1em;
   font-size: 0.7em;
   font-weight: bold;
@@ -47,19 +48,19 @@
 }
 
 :host > figure span {
-  background: var(--line-color);
+  background: hsl(var(--line-color));
   height: var(--line-h);
   width: var(--line-w);
 }
 
 :host > figure div {
   flex: 2;
-  background: var(--line-color);
+  background: hsl(var(--line-color));
   width: var(--line-w);
   height: var(--line-h);
 }
 
 :host figure:matches([quadrant="bottom"], [quadrant="right"]) > div:first-of-type,
 :host figure:matches([quadrant="top"], [quadrant="left"]) > div:last-of-type {
-  background: linear-gradient(to var(--quadrant), hotpink 0%, var(--line-color) 100%);
+  background: linear-gradient(to var(--quadrant), hotpink 0%, hsl(var(--line-color)) 100%);
 }

app/components/selection/distance.element.js

@@ -36,14 +36,12 @@ export class Distance extends HTMLElement {
       ? this.style.setProperty('--line-h', `var(--line-w)`)
       : this.style.setProperty('--line-w', `var(--line-w)`)
 
-    if (color) {
-      this.style.setProperty('--line-color', color === 'pink'
-        ? 'hotpink'
-        : 'hsl(267, 100%, 58%)')
-      this.style.setProperty('--line-base', color === 'pink'
-        ? 'hotpink'
-        : 'hsl(267, 100%, 58%)')
-    }
+    this.style.setProperty('--line-color', color === 'pink'
+      ? '330 100% 71%'
+      : '267 100% 58%')
+    this.style.setProperty('--line-base', color === 'pink'
+      ? '330 100% 71%'
+      : '267 100% 58%')
   }
 
   render({q,d}, node_label_id) {