significant palette overhaul, w. addition of +3 new palettes; new swatch preview appearance; expanded palette toggle functionality; repaired test suite accordingly
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful

This commit is contained in:
Disco DeDisco
2026-03-15 18:52:09 -04:00
parent ace9a4888e
commit b49218b45b
5 changed files with 87 additions and 30 deletions

View File

@@ -303,7 +303,8 @@ class SetPaletteTest(TestCase):
response = self.client.get(self.url)
parsed = lxml.html.fromstring(response.content)
forms = parsed.cssselect('form[action="/dashboard/set_palette"]')
self.assertEqual(len(forms), 1)
unlocked = [p for p in response.context["palettes"] if not p["locked"]]
self.assertEqual(len(forms), len(unlocked))
def test_active_palette_swatch_has_active_class(self):
response = self.client.get(self.url)

View File

@@ -17,9 +17,17 @@ from apps.lyric.models import PaymentMethod, Token, User, Wallet
APPLET_ORDER = ["wallet", "new-note", "my-notes", "username", "palette"]
UNLOCKED_PALETTES = frozenset(["palette-default"])
UNLOCKED_PALETTES = frozenset([
"palette-default",
"palette-monochrome-light",
"palette-monochrome-dark",
"palette-sepia",
])
PALETTES = [
{"name": "palette-default", "label": "Earthman", "locked": False},
{"name": "palette-monochrome-light", "label": "Monochrome (Light)", "locked": False},
{"name": "palette-monochrome-dark", "label": "Monochrome (Dark)", "locked": False},
{"name": "palette-sepia", "label": "Sepia", "locked": False},
{"name": "palette-nirvana", "label": "Nirvana", "locked": True},
{"name": "palette-sheol", "label": "Sheol", "locked": True},
{"name": "palette-inferno", "label": "Inferno", "locked": True},

View File

@@ -9,19 +9,25 @@ class LayoutAndStylingTest(FunctionalTest):
note_page = NotePage(self)
self.browser.set_window_size(1024, 768)
# print("Viewport width:", self.browser.execute_script("return window.innerWidth"))
def section_center(el):
return self.browser.execute_script("""
var el = arguments[0];
var ancestor = el.parentElement;
while (ancestor && ancestor.tagName !== 'SECTION'
&& !ancestor.classList.contains('container')) {
ancestor = ancestor.parentElement;
}
var s = (ancestor || document.body).getBoundingClientRect();
var r = arguments[0].getBoundingClientRect();
return [r.x + r.width / 2, s.x + s.width / 2];
""", el)
inputbox = note_page.get_item_input_box()
self.assertAlmostEqual(
inputbox.location['x'] + inputbox.size['width'] / 2,
512,
delta=10,
)
input_c, section_c = section_center(inputbox)
self.assertAlmostEqual(input_c, section_c, delta=10)
note_page.add_note_item("testing")
inputbox = note_page.get_item_input_box()
self.assertAlmostEqual(
inputbox.location['x'] + inputbox.size['width'] / 2,
512,
delta=10,
)
input_c, section_c = section_center(inputbox)
self.assertAlmostEqual(input_c, section_c, delta=10)

View File

@@ -27,11 +27,13 @@
border-radius: 0.5rem;
background: linear-gradient(
to bottom,
rgba(var(--terUser), 1) 0%,
rgba(var(--terUser), 1) 33%,
rgba(var(--priUser), 1) 33%,
rgba(var(--priUser), 1) 66%,
rgba(var(--quiUser), 1) 66%,
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(--quiUser), 1) 85%,
rgba(var(--quiUser), 1) 100%
);
border: 0.15rem solid rgba(var(--secUser), 0.5);

View File

@@ -236,8 +236,8 @@
--terSwp: 102, 92, 67;
--quaSwp: 43, 46, 37;
// blood (Tyche's Phlegethon)
--priBld: 190, 69, 40;
--secBld: 167, 53, 42;
--priBld: 200, 79, 50;
--secBld: 177, 63, 52;
--terBld: 120, 37, 33;
--quaBld: 77, 23, 13;
// ice (Daimon's Cocytus)
@@ -318,12 +318,12 @@
.palette-sheol {
--priUser: var(--priPu);
--secUser: var(--quiPu);
--terUser: var(--terFs);
--terUser: var(--priFs);
--quaUser: var(--priCfw);
--quiUser: var(--terCfw);
--sixUser: var(--terId);
--sepUser: var(--secId);
--octUser: var(--priFs);
--octUser: var(--terFs);
--ninUser: var(--sixPu);
--decUser: var(--terPu);
}
@@ -331,12 +331,12 @@
.palette-nirvana {
--priUser: var(--priU);
--secUser: var(--quiU);
--terUser: var(--terMe);
--terUser: var(--priMe);
--quaUser: var(--quiCu);
--quiUser: var(--terCu);
--sixUser: var(--terKhk);
--sepUser: var(--priKhk);
--octUser: var(--priMe);
--octUser: var(--terMe);
--ninUser: var(--sixCu);
--decUser: var(--terU);
}
@@ -344,12 +344,12 @@
.palette-inferno {
--priUser: var(--quaSwp);
--secUser: var(--priSwp);
--terUser: var(--terBld);
--terUser: var(--secBld);
--quaUser: var(--priIce);
--quiUser: var(--quaIce);
--sixUser: var(--priTrs);
--sepUser: var(--terTrs);
--octUser: var(--priBld);
--octUser: var(--terBld);
--ninUser: var(--priMst);
--decUser: var(--terMst);
}
@@ -370,16 +370,56 @@
.palette-celestia {
--priUser: var(--octClh);
--secUser: var(--sixClh);
--terUser: var(--quaClh);
--terUser: var(--terClh);
--quaUser: var(--decClh);
--quiUser: var(--ninClh);
--sixUser: var(--sepClh);
--sepUser: var(--secClh);
--octUser: var(--terClh);
--ninUser: var(--priClh);
--sepUser: var(--priClh);
--octUser: var(--quaClh);
--ninUser: var(--secClh);
--decUser: var(--quiClh);
}
/* Monochrome Dark Palette */
.palette-monochrome-dark {
--priUser: var(--priAg); /* 30,30,30 — near-black bg */
--secUser: var(--quiAg); /* 175,175,175 — light gray text/border */
--terUser: var(--sixAg); /* 240,240,240 — bright white accent */
--quaUser: var(--sixAg); /* 240,240,240 — active/interactive */
--quiUser: var(--quaAg); /* 133,133,133 — secondary action */
--sixUser: var(--terAg); /* 100,100,100 — subtle mid */
--sepUser: var(--secAg); /* 60,60,60 — deep subtle */
--octUser: var(--quiPt); /* 189,190,189 — links (cooler silver) */
--ninUser: var(--sixAg); /* 240,240,240 — glow highlight */
--decUser: var(--terAg); /* 100,100,100 — mid tone */
}
/* Monochrome Light Palette */
.palette-monochrome-light {
--priUser: var(--sixAg); /* 240,240,240 — light gray bg */
--secUser: var(--terAg); /* 100,100,100 — mid-dark text/border */
--terUser: var(--secAg); /* 60,60,60 — dark accent */
--quaUser: var(--priAg); /* 30,30,30 — near-black active */
--quiUser: var(--quaAg); /* 133,133,133 — mid-gray action */
--sixUser: var(--quiAg); /* 175,175,175 — subtle */
--sepUser: var(--sixAg); /* 240,240,240 — secondary subtle */
--octUser: var(--terNi); /* 93,95,94 — links */
--ninUser: var(--priCtn); /* 255,251,246 — warm bright highlight */
--decUser: var(--secPt); /* 189,190,189 — light mid */
}
/* Sepia Palette */
.palette-sepia {
--priUser: var(--priCu); /* 46,24,5 — very dark warm brown bg */
--secUser: var(--quiCu); /* 207,173,143 — warm beige text/border */
--terUser: var(--quiAu); /* 214,186,84 — amber gold accent */
--quaUser: var(--quaAg); /* 195,176,145 — warm tan interactive */
--quiUser: var(--quaSwp); /* 95,76,45 — deep khaki */
--sixUser: var(--quaCu); /* 171,112,60 — copper mid */
--sepUser: var(--terCu); /* 133,81,36 — deep copper */
--octUser: var(--quaAu); /* 181,154,54 — golden links */
--ninUser: var(--sixCu); /* 242,216,191 — warm cream highlight */
--decUser: var(--secKhk); /* 145,126,95 — warm mid-tone */
}
/* Palette Classes */
.priUser {
color: rgba(var(--priUser), 1);