discoman/python-tdd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Billnote palette swatch: DRY w. .swatch via palette-swatch-bg mixin; fixes --quaUser→--quiUser drift
Some checks failed
ci/woodpecker/push/pyswiss Pipeline was successful
Details
ci/woodpecker/push/main Pipeline failed
Details

Browse Source 
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>
This commit is contained in:
Disco DeDisco
2026-05-19 22:09:01 -04:00
parent b6e93b9d64
commit 31ed2bda0e
2 changed files with 19 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/static_src/scss/_note.scss
View File

@@ -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;

22
src/static_src/scss/_palette-picker.scss
View File

@@ -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);