Better complement.

src/components/app/Page.svelte

@@ -28,7 +28,7 @@
             : '';
         document.body.style.color = $fullscreen.on
             ? $fullscreen.background instanceof Color
-                ? $fullscreen.background.complement().toCSS()
+                ? $fullscreen.background.contrasting().toCSS()
                 : ''
             : '';
     }

src/components/output/StageView.svelte

@@ -332,7 +332,7 @@
         style:background={background ? stage.back.toCSS() : null}
         style:color={getColorCSS(stage.getFirstRestPose(), stage.pose)}
         style:opacity={getOpacityCSS(stage.getFirstRestPose(), stage.pose)}
-        style:--grid-color={stage.back.complement().toCSS()}
+        style:--grid-color={stage.back.contrasting().toCSS()}
         bind:this={view}
     >
         <!-- Render the stage -->

src/components/project/TileView.svelte

@@ -48,7 +48,7 @@
     onMount(() => (mounted = true));
 
     $: foreground =
-        background instanceof Color ? background.complement().toCSS() : null;
+        background instanceof Color ? background.contrasting().toCSS() : null;
 
     const dispatch = createEventDispatcher();
 

src/components/widgets/Button.svelte

@@ -135,6 +135,7 @@
     }
 
     .background {
+        color: var(--wordplay-foreground);
         background: var(--wordplay-alternating-color);
     }
 

src/output/Color.ts

@@ -37,12 +37,12 @@ export default class Color extends Valued {
         this.hue = h;
     }
 
-    complement() {
+    contrasting() {
         return new Color(
             this.value,
-            new Decimal(1).sub(this.lightness),
-            this.chroma,
-            new Decimal(180).add(this.hue),
+            new Decimal(this.lightness.greaterThan(0.5) ? 0 : 1),
+            new Decimal(100),
+            new Decimal(0),
         );
     }