Billnote palette swatch: DRY w. .swatch via palette-swatch-bg mixin; fixes --quaUser→--quiUser drift

Note swatches (right-side thumbnail + modal preview tiles) were inlining their own linear-gradient that ended on --quaUser instead of --quiUser, so the 4th band rendered the wrong palette colour (e.g., Maryland's red showed up on the Baltimorean Note where the My Palettes applet's matching tile shows none). Extracted the canonical gradient into a @mixin palette-swatch-bg in _palette-picker.scss and @include'd it from .swatch, .note-item__palette + .note-swatch-body so all three share one source of truth.

Code architected by Disco DeDisco <discodedisco@outlook.com>

Git commit message Co-Authored-By:

Claude Opus 4.7 <noreply@anthropic.com>

src/static_src/scss/_note.scss

@@ -233,25 +233,14 @@
     }
 }
 
-// Confirmed palette swatch — right-side thumbnail, same gradient as .note-swatch-body.
+// Confirmed palette swatch — right-side thumbnail, shares the canonical
-// palette-* class is on the element so CSS vars cascade from that palette automatically.
+// gradient w. .swatch via palette-swatch-bg mixin (single source of truth).
 .note-item__palette {
     width: 3rem;
     height: 3rem;
     flex-shrink: 0;
     border-radius: 0.25rem;
-    border: 0.15rem solid rgba(var(--secUser), 0.5);
+    @include palette-swatch-bg;
-    background: linear-gradient(
-        to bottom,
-        rgba(var(--secUser), 1) 0%,
-        rgba(var(--secUser), 1) 30%,
-        rgba(var(--priUser), 1) 30%,
-        rgba(var(--priUser), 1) 70%,
-        rgba(var(--terUser), 1) 70%,
-        rgba(var(--terUser), 1) 85%,
-        rgba(var(--quaUser), 1) 85%,
-        rgba(var(--quaUser), 1) 100%
-    );
 }
 
 // ── Palette modal ──────────────────────────────────────────────────────────
@@ -282,20 +271,7 @@
             height: 3.25rem;
             border-radius: 0.25rem;
             cursor: pointer;
-            // Gradient uses vars scoped to the parent palette-* class,
+            @include palette-swatch-bg;
-            // so each swatch shows its own palette's colours (same as .swatch).
-            background: linear-gradient(
-                to bottom,
-                rgba(var(--secUser), 1) 0%,
-                rgba(var(--secUser), 1) 30%,
-                rgba(var(--priUser), 1) 30%,
-                rgba(var(--priUser), 1) 70%,
-                rgba(var(--terUser), 1) 70%,
-                rgba(var(--terUser), 1) 85%,
-                rgba(var(--quaUser), 1) 85%,
-                rgba(var(--quaUser), 1) 100%
-            );
-            border: 0.15rem solid rgba(var(--secUser), 0.5);
             flex-shrink: 0;
             transition: border-color 0.12s, box-shadow 0.12s;
 

src/static_src/scss/_palette-picker.scss

@@ -18,13 +18,11 @@
     scroll-snap-align: start;
 }
 
-.swatch {
+// Canonical palette swatch gradient. Single source of truth for every place
-    position: relative;
+// a palette is rendered as a 4-band swatch (applet thumb, billnote thumb,
-    width: 7rem;
+// billnote modal options). The palette-* class on the element supplies the
-    height: 7rem;
+// --priUser/--secUser/--terUser/--quiUser vars; this mixin paints them.
-    aspect-ratio: 1;
+@mixin palette-swatch-bg {
-    border-radius: 0.5rem;
-    cursor: pointer;
     background: linear-gradient(
         to bottom,
         rgba(var(--secUser), 1) 0%,
@@ -37,6 +35,16 @@
         rgba(var(--quiUser), 1) 100%
     );
     border: 0.15rem solid rgba(var(--secUser), 0.5);
+}
+
+.swatch {
+    position: relative;
+    width: 7rem;
+    height: 7rem;
+    aspect-ratio: 1;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    @include palette-swatch-bg;
 
     &.active {
         border: 0.2rem solid rgba(var(--ninUser), 1);