app-proto/main.css

@@ -1,19 +1,7 @@
-: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: var(--text);
+  color: #fcfcfc;
-  background-color: var(--page-background);
+  background-color: #222;
   font-family: 'Fira Sans', sans-serif;
 }
 
@@ -29,7 +17,7 @@ body {
   padding: 0px;
   border-width: 0px 1px 0px 0px;
   border-style: solid;
-  border-color: var(--border);
+  border-color: #555;
 }
 
 /* add-remove */
@@ -47,10 +35,6 @@ 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;
 }
@@ -73,8 +57,8 @@ summary {
 }
 
 summary.selected {
-  color: var(--text-bright);
+  color: #fff;
-  background-color: var(--selection-highlight);
+  background-color: #444;
 }
 
 summary > div, .constraint {
@@ -128,7 +112,7 @@ details[open]:has(li) .element-switch::after {
 }
 
 .constraint.invalid {
-  color: var(--text-invalid);
+  color: #f58fc2;
 }
 
 .constraint > input[type=checkbox] {
@@ -138,12 +122,12 @@ details[open]:has(li) .element-switch::after {
 .constraint > input[type=text] {
   color: inherit;
   background-color: inherit;
-  border: 1px solid var(--border);
+  border: 1px solid #555;
   border-radius: 2px;
 }
 
 .constraint.invalid > input[type=text] {
-  border-color: var(--border-invalid);
+  border-color: #70495c;
 }
 
 .status {
@@ -156,7 +140,7 @@ details[open]:has(li) .element-switch::after {
 
 .invalid > .status::after, details:has(.invalid):not([open]) .status::after {
   content: '⚠';
-  color: var(--text-invalid);
+  color: #f58fc2;
 }
 
 /* display */
@@ -165,11 +149,11 @@ canvas {
   float: left;
   margin-left: 20px;
   margin-top: 20px;
-  background-color: var(--display-background);
+  background-color: #020202;
-  border: 1px solid var(--border);
+  border: 1px solid #555;
   border-radius: 16px;
 }
 
 canvas:focus {
-  border-color: var(--border-focus);
+  border-color: #aaa;
 }

app-proto/src/add_remove.rs

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