updated palette-classes ending in .*-light to switch the rgb values of their tooltip background-color attrs from black to white (better accessibility); changed 'monochrome-light' & its cognates to 'oblivion-light', since it's hardly monochrome at all anymore

src/apps/dashboard/views.py

@@ -20,13 +20,13 @@ APPLET_ORDER = ["wallet", "new-note", "my-notes", "username", "palette"]
 UNLOCKED_PALETTES = frozenset([
     "palette-default",
     "palette-sepia",
-    "palette-monochrome-light",
+    "palette-oblivion-light",
     "palette-monochrome-dark",
 ])
 PALETTES = [
     {"name": "palette-default", "label": "Earthman", "locked": False},
     {"name": "palette-sepia", "label": "Sepia", "locked": False},
-    {"name": "palette-monochrome-light", "label": "Monochrome (Light)", "locked": False},
+    {"name": "palette-oblivion-light", "label": "Oblivion (Light)", "locked": False},
     {"name": "palette-monochrome-dark", "label": "Monochrome (Dark)", "locked": False},
     {"name": "palette-nirvana", "label": "Nirvana", "locked": True},
     {"name": "palette-sheol", "label": "Sheol", "locked": True},

src/functional_tests/test_applet_palette.py

@@ -1,5 +1,7 @@
 from selenium.webdriver.common.by import By
 
+from apps.lyric.models import User
+
 from .base import FunctionalTest
 
 
@@ -8,3 +10,20 @@ class SiteThemeTest(FunctionalTest):
         self.browser.get(self.live_server_url)
         body = self.browser.find_element(By.TAG_NAME, "body")
         self.assertIn("palette-default", body.get_attribute("class"))
+
+
+class LightPaletteTest(FunctionalTest):
+    def test_light_palette_tooltip_uses_white_background(self):
+        user, _ = User.objects.get_or_create(email="light@example.com")
+        user.palette = "palette-oblivion-light"
+        user.save()
+        self.create_pre_authenticated_session("light@example.com")
+
+        self.browser.get(self.live_server_url + "/dashboard/wallet/")
+
+        body = self.browser.find_element(By.TAG_NAME, "body")
+        tooltip_bg = self.browser.execute_script(
+            "return getComputedStyle(arguments[0]).getPropertyValue('--tooltip-bg').trim()",
+            body,
+        )
+        self.assertEqual(tooltip_bg, "255, 255, 255")

src/static_src/scss/_wallet-tokens.scss

@@ -3,7 +3,7 @@
     width: 16rem;
     max-width: 16rem;
     white-space: normal;
-    background-color: rgba(0, 0, 0, 0.5);
+    background-color: rgba(var(--tooltip-bg), 0.5);
     backdrop-filter: blur(6px);
     border: 0.1rem solid rgba(var(--secUser), 0.5);
     color: rgba(var(--secUser), 1);

src/static_src/scss/rootvars.scss

@@ -219,6 +219,9 @@
     // iron (meteoric)
     
 
+    /* Component tokens */
+    --tooltip-bg: 0, 0, 0;
+
     /* Inferno Palette (4 per) */
     // mist (Elpis's Lethe)
     --priMst: 168, 202, 172;
@@ -394,7 +397,7 @@
     --decUser: var(--terAg);    /* 100,100,100 — mid tone                */
 }
 /* Monochrome Light Palette */
-.palette-monochrome-light {
+.palette-oblivion-light {
     --priUser: var(--sixAdm);    /* 240,240,240 — light gray bg           */
     --secUser: var(--terPer);    /* 100,100,100 — mid-dark text/border    */
     --terUser: var(--priPer);    /* 60,60,60    — dark accent             */
@@ -420,6 +423,11 @@
     --decUser: var(--secKhk);   /* 145,126,95  — warm mid-tone          */
 }
 
+/* Light palette overrides */
+body[class*="-light"] {
+    --tooltip-bg: 255, 255, 255;
+}
+
 /* Palette Classes */
 .priUser {
     color: rgba(var(--priUser), 1);