From 31ed2bda0e7e552d67ebca4d26a0aa2cbf91fd50 Mon Sep 17 00:00:00 2001 From: Disco DeDisco Date: Tue, 19 May 2026 22:09:01 -0400 Subject: [PATCH] =?UTF-8?q?Billnote=20palette=20swatch:=20DRY=20w.=20.swat?= =?UTF-8?q?ch=20via=20palette-swatch-bg=20mixin;=20fixes=20--quaUser?= =?UTF-8?q?=E2=86=92--quiUser=20drift?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 Git commit message Co-Authored-By: Claude Opus 4.7 --- src/static_src/scss/_note.scss | 32 +++--------------------- src/static_src/scss/_palette-picker.scss | 22 ++++++++++------ 2 files changed, 19 insertions(+), 35 deletions(-) diff --git a/src/static_src/scss/_note.scss b/src/static_src/scss/_note.scss index e2c0b45..2111e0d 100644 --- a/src/static_src/scss/_note.scss +++ b/src/static_src/scss/_note.scss @@ -233,25 +233,14 @@ } } -// Confirmed palette swatch — right-side thumbnail, same gradient as .note-swatch-body. -// palette-* class is on the element so CSS vars cascade from that palette automatically. +// Confirmed palette swatch — right-side thumbnail, shares the canonical +// 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); - 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% - ); + @include palette-swatch-bg; } // ── Palette modal ────────────────────────────────────────────────────────── @@ -282,20 +271,7 @@ height: 3.25rem; border-radius: 0.25rem; cursor: pointer; - // Gradient uses vars scoped to the parent palette-* class, - // 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); + @include palette-swatch-bg; flex-shrink: 0; transition: border-color 0.12s, box-shadow 0.12s; diff --git a/src/static_src/scss/_palette-picker.scss b/src/static_src/scss/_palette-picker.scss index 3d8031e..69814b1 100644 --- a/src/static_src/scss/_palette-picker.scss +++ b/src/static_src/scss/_palette-picker.scss @@ -18,13 +18,11 @@ scroll-snap-align: start; } -.swatch { - position: relative; - width: 7rem; - height: 7rem; - aspect-ratio: 1; - border-radius: 0.5rem; - cursor: pointer; +// Canonical palette swatch gradient. Single source of truth for every place +// a palette is rendered as a 4-band swatch (applet thumb, billnote thumb, +// billnote modal options). The palette-* class on the element supplies the +// --priUser/--secUser/--terUser/--quiUser vars; this mixin paints them. +@mixin palette-swatch-bg { 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);