From ffb374c81c1dc57de0a97b08b5143c63c923b948 Mon Sep 17 00:00:00 2001 From: Disco DeDisco Date: Sat, 21 Mar 2026 23:57:05 -0400 Subject: [PATCH] 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 | 4 ++-- src/functional_tests/test_applet_palette.py | 19 +++++++++++++++++++ src/static_src/scss/_wallet-tokens.scss | 2 +- src/static_src/scss/rootvars.scss | 10 +++++++++- 4 files changed, 31 insertions(+), 4 deletions(-) diff --git a/src/apps/dashboard/views.py b/src/apps/dashboard/views.py index 6d9408b..a8b7b9d 100644 --- a/src/apps/dashboard/views.py +++ b/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}, diff --git a/src/functional_tests/test_applet_palette.py b/src/functional_tests/test_applet_palette.py index f3f34d2..36e4aad 100644 --- a/src/functional_tests/test_applet_palette.py +++ b/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") diff --git a/src/static_src/scss/_wallet-tokens.scss b/src/static_src/scss/_wallet-tokens.scss index 29f9209..6692042 100644 --- a/src/static_src/scss/_wallet-tokens.scss +++ b/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); diff --git a/src/static_src/scss/rootvars.scss b/src/static_src/scss/rootvars.scss index 05674c5..47ce21d 100644 --- a/src/static_src/scss/rootvars.scss +++ b/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);