Explain emoji icon kludge

app-proto/main.css

@@ -1,7 +1,19 @@
+:root {
+  --text: #fcfcfc; /* almost white */
+  --text-bright: white;
+  --text-invalid: #f58fc2; /* bright pink */
+  --border: #555; /* light gray */
+  --border-focus: #aaa; /* bright gray */
+  --border-invalid: #70495c; /* dusky pink */
+  --selection-highlight: #444; /* medium gray */
+  --page-background: #222; /* dark gray */
+  --display-background: #020202; /* almost black */
+}
+
 body {
   margin: 0px;
-  color: #fcfcfc;
-  background-color: #222;
+  color: var(--text);
+  background-color: var(--page-background);
   font-family: 'Fira Sans', sans-serif;
 }
 
@@ -17,7 +29,7 @@ body {
   padding: 0px;
   border-width: 0px 1px 0px 0px;
   border-style: solid;
-  border-color: #555;
+  border-color: var(--border);
 }
 
 /* add-remove */
@@ -35,6 +47,10 @@ body {
 }
 
 /* KLUDGE */
+/*
+  for convenience, we're using emoji as temporary icons for some buttons. these
+  buttons need to be displayed in an emoji font
+*/
 #add-remove > button.emoji {
   font-family: 'Noto Emoji', sans-serif;
 }
@@ -57,8 +73,8 @@ summary {
 }
 
 summary.selected {
-  color: #fff;
-  background-color: #444;
+  color: var(--text-bright);
+  background-color: var(--selection-highlight);
 }
 
 summary > div, .constraint {
@@ -112,7 +128,7 @@ details[open]:has(li) .element-switch::after {
 }
 
 .constraint.invalid {
-  color: #f58fc2;
+  color: var(--text-invalid);
 }
 
 .constraint > input[type=checkbox] {
@@ -122,12 +138,12 @@ details[open]:has(li) .element-switch::after {
 .constraint > input[type=text] {
   color: inherit;
   background-color: inherit;
-  border: 1px solid #555;
+  border: 1px solid var(--border);
   border-radius: 2px;
 }
 
 .constraint.invalid > input[type=text] {
-  border-color: #70495c;
+  border-color: var(--border-invalid);
 }
 
 .status {
@@ -140,7 +156,7 @@ details[open]:has(li) .element-switch::after {
 
 .invalid > .status::after, details:has(.invalid):not([open]) .status::after {
   content: '⚠';
-  color: #f58fc2;
+  color: var(--text-invalid);
 }
 
 /* display */
@@ -149,11 +165,11 @@ canvas {
   float: left;
   margin-left: 20px;
   margin-top: 20px;
-  background-color: #020202;
-  border: 1px solid #555;
+  background-color: var(--display-background);
+  border: 1px solid var(--border);
   border-radius: 16px;
 }
 
 canvas:focus {
-  border-color: #aaa;
+  border-color: var(--border-focus);
 }

app-proto/src/add_remove.rs

@@ -173,7 +173,7 @@ pub fn AddRemove() -> View {
                 }
             ) { "+" }
             button(
-                class="emoji", /* KLUDGE */
+                class="emoji", /* KLUDGE */ // for convenience, we're using an emoji as a temporary icon for this button
                 disabled={
                     let state = use_context::<AppState>();
                     state.selection.with(|sel| sel.len() != 2)