UX: Restore wizard confetti in final step (#23533)

This was accidentally removed as part of the refactoring in fcb4e5a1a1. This commit restores it, and updates it use theme-specific colours.

app/assets/javascripts/wizard/addon/components/wizard-canvas.js

@@ -7,18 +7,10 @@ const SIZE = 144;
 let width, height;
 
 const COLORS = [
-  "#BF1E2E",
+  "--tertiary",
-  "#F1592A",
+  "--quaternary",
-  "#F7941D",
+  "--tertiary-medium",
-  "#9EB83B",
+  "--quaternary-low",
-  "#3AB54A",
-  "#12A89D",
-  "#25AAE2",
-  "#0E76BD",
-  "#652D90",
-  "#92278F",
-  "#ED207B",
-  "#8C6238",
 ];
 
 class Particle {
@@ -34,7 +26,8 @@ class Particle {
     this.ang = Math.random() * 2 * Math.PI;
     this.scale = Math.random() * 0.4 + 0.2;
     this.radius = Math.random() * 25 + 25;
-    this.color = COLORS[Math.floor(Math.random() * COLORS.length)];
+    const colorVar = COLORS[Math.floor(Math.random() * COLORS.length)];
+    this.color = getComputedStyle(document.body).getPropertyValue(colorVar);
     this.flipped = Math.random() > 0.5 ? 1 : -1;
   }
 

app/assets/javascripts/wizard/addon/controllers/wizard.js

@@ -0,0 +1,8 @@
+import Controller, { inject as controller } from "@ember/controller";
+
+export default class extends Controller {
+  @controller wizardStep;
+  get showCanvas() {
+    return this.wizardStep.get("step.id") === "ready";
+  }
+}

app/assets/stylesheets/wizard.scss

@@ -33,6 +33,7 @@ body.wizard {
   }
 
   .discourse-logo svg {
+    position: relative;
     height: 70px;
     width: auto;
     @include breakpoint("mobile-extra-large") {
@@ -44,6 +45,12 @@ body.wizard {
       }
     }
   }
+
+  .wizard-canvas {
+    position: fixed;
+    top: 0;
+    pointer-events: none;
+  }
 }
 
 // Refactored SCSS