Soften the dark theme and widen the issues column (#44)

Idle services and out-of-scope rows keep readable text instead of fading with opacity, and the issues column grows with the window.

Author: lesnik512

release_scope/_static/index.html

@@ -14,26 +14,29 @@
 </script>
 <style>
   :root {
-    --bg: #ffffff; --fg: #1f2328; --muted: #656d76; --border: #d0d7de; --panel: #f6f8fa;
+    --bg: #ffffff; --fg: #1f2328; --muted: #656d76; --faint: #6e7781; --border: #d0d7de; --panel: #f6f8fa;
     --accent: #0969da; --bad: #cf222e; --warn: #9a6700; --good: #1a7f37;
+    --pill-bg: var(--accent); --pill-fg: var(--bg);
     color-scheme: light;
   }
   @media (prefers-color-scheme: dark) {
     :root:not([data-theme="light"]) {
-      --bg: #0d1117; --fg: #e6edf3; --muted: #8d96a0; --border: #30363d; --panel: #161b22;
-      --accent: #4493f8; --bad: #f85149; --warn: #d29922; --good: #3fb950;
+      --bg: #22272e; --fg: #cdd5df; --muted: #a3adb8; --faint: #959fa9; --border: #444c56; --panel: #2d333b;
+      --accent: #7cb9ff; --bad: #f8817a; --warn: #daaa3f; --good: #5fbf72;
+      --pill-bg: color-mix(in srgb, var(--accent) 20%, transparent); --pill-fg: var(--accent);
       color-scheme: dark;
     }
   }
   :root[data-theme="dark"] {
-    --bg: #0d1117; --fg: #e6edf3; --muted: #8d96a0; --border: #30363d; --panel: #161b22;
-    --accent: #4493f8; --bad: #f85149; --warn: #d29922; --good: #3fb950;
+    --bg: #22272e; --fg: #cdd5df; --muted: #a3adb8; --faint: #959fa9; --border: #444c56; --panel: #2d333b;
+    --accent: #7cb9ff; --bad: #f8817a; --warn: #daaa3f; --good: #5fbf72;
+    --pill-bg: color-mix(in srgb, var(--accent) 20%, transparent); --pill-fg: var(--accent);
     color-scheme: dark;
   }
   [x-cloak] { display: none !important; }
   * { box-sizing: border-box; }
   body { margin: 0; background: var(--bg); color: var(--fg); font: 14px/1.5 system-ui, sans-serif; }
-  main { max-width: 1680px; margin: 0 auto; padding: 16px; }
+  main { max-width: 2048px; margin: 0 auto; padding: 16px; }
   h1 { font-size: 24px; margin: 0 0 4px; }
   h2 { font-size: 18px; margin: 32px 0 8px; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
   a { color: var(--accent); text-decoration: none; }
@@ -56,7 +59,7 @@
   .warn { color: var(--warn); }
   .message { white-space: pre-line; }
   .scroll { overflow-x: auto; }
-  .layout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 24px; align-items: start; }
+  .layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(420px, 32vw, 640px); gap: 24px; align-items: start; }
   .layout > aside { position: sticky; top: 0; max-height: 100vh; overflow-y: auto; padding: 0 4px 16px; }
   .strip { display: none; writing-mode: vertical-rl; width: 40px; min-height: 240px; margin-top: 32px; padding: 12px 4px;
     border-color: var(--accent); color: var(--accent); font-weight: 600; }
@@ -72,7 +75,7 @@
   .tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
   .outputs textarea { min-height: 160px; }
   .out-head { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
-  tr.out-of-scope td { opacity: 0.55; }
+  tr.out-of-scope td, tr.out-of-scope .muted { color: var(--faint); }
   tr.shipped td { background: color-mix(in srgb, var(--accent) 12%, transparent); }
   .tag { white-space: nowrap; }
   .service { border: 1px solid var(--border); border-radius: 6px; margin: 6px 0; }
@@ -82,9 +85,9 @@
   .service.deployed { border-left: 4px solid var(--good); background: color-mix(in srgb, var(--good) 6%, transparent); }
   .service.deployed .name { color: var(--good); }
   .chip { display: inline-flex; align-items: center; gap: 4px; padding: 0 4px 0 10px; border-radius: 999px;
-    background: var(--accent); color: var(--bg); font-weight: 600; }
+    background: var(--pill-bg); color: var(--pill-fg); font-weight: 600; }
   .chip button { border: 0; border-radius: 999px; padding: 0 6px; background: transparent; color: inherit; }
-  .chip button:hover { background: color-mix(in srgb, var(--bg) 25%, transparent); }
+  .chip button:hover { background: color-mix(in srgb, currentColor 25%, transparent); }
   .service > summary::before { content: "▸"; color: var(--muted); }
   .service[open] > summary::before { content: "▾"; }
   .service .name { min-width: 200px; font-weight: 600; }
@@ -96,11 +99,12 @@
   .status-done { color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); }
   button.picked { border-color: var(--accent); color: var(--accent); }
   .service.involved { border-color: var(--accent); }
-  .service.idle { opacity: 0.45; }
+  .service.idle:not(.deployed) { border-style: dashed; }
+  .service.idle > summary, .service.idle > summary :is(.name, .muted, .warn, .bad) { color: var(--faint); }
   .service.unlisted { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 12px; border-style: dashed; }
   .plan-line { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; padding-left: 14px; }
   .plan-line > span { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
-  .key { padding: 0 8px; border: 1px solid var(--accent); border-radius: 999px; font-size: 12px; background: var(--accent); color: var(--bg); }
+  .key { padding: 0 8px; border: 1px solid var(--accent); border-radius: 999px; font-size: 12px; background: var(--pill-bg); color: var(--pill-fg); }
   .key.rider { border-style: dashed; border-color: var(--warn); background: transparent; color: var(--warn); }
   .cell { padding: 0 6px; border-radius: 4px; font-size: 12px; white-space: nowrap; }
   .cell-tag { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
@@ -119,7 +123,7 @@
     align-items: center; height: 48px; padding: 4px 8px; border-bottom: 1px solid var(--border); cursor: pointer; }
   .issue-row:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
   .issue-row.chosen { background: color-mix(in srgb, var(--accent) 10%, transparent); }
-  .issue-row code { font-weight: 600; }
+  .issue-row code { font-weight: 500; }
   .issue-row .summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .issue-row .reach { grid-column: 3 / -1; display: flex; gap: 4px; overflow: hidden; white-space: nowrap; }
   .rider-mark { padding: 0 6px; border: 1px dashed var(--warn); border-radius: 999px; color: var(--warn); font-size: 11px; white-space: nowrap; }

tests/test_browser.py

@@ -236,3 +236,51 @@ def test_demo_a_hand_pick_survives_when_the_issue_is_unticked(page: Page, demo_s
     expect(web.locator(".chip > span")).to_have_text("1.9.1")
     expect(page).to_have_url(re.compile(r"#shop/web=1\.9\.1$"))
     assert errors == []
+
+
+_SHOWN_COLOR_JS: typing.Final = """element => {
+    let alpha = 1;
+    for (let node = element; node; node = node.parentElement) alpha *= Number(getComputedStyle(node).opacity);
+    return [getComputedStyle(element).color, getComputedStyle(document.body).backgroundColor, alpha];
+}"""
+
+
+def _luminance(color: str) -> float:
+    channels: typing.Final = [int(value) / 255 for value in re.findall(r"\d+", color)[:3]]
+    linear: typing.Final = [
+        value / 12.92 if value <= 0.04045 else ((value + 0.055) / 1.055) ** 2.4 for value in channels
+    ]
+    return 0.2126 * linear[0] + 0.7152 * linear[1] + 0.0722 * linear[2]
+
+
+def _contrast(element: Locator) -> float:
+    color, background, alpha = element.evaluate(_SHOWN_COLOR_JS)
+    text, ground = _luminance(color), _luminance(background)
+    shown: typing.Final = alpha * text + (1 - alpha) * ground
+    return (max(shown, ground) + 0.05) / (min(shown, ground) + 0.05)
+
+
+@pytest.mark.parametrize("scheme", ["light", "dark"])
+def test_demo_an_idle_service_keeps_readable_text(
+    page: Page, demo_site: str, errors: list[str], scheme: typing.Literal["light", "dark"]
+) -> None:
+    page.emulate_media(color_scheme=scheme)
+    page.goto(demo_site)
+    _issue(page, "SHOP-38").check()
+
+    worker: typing.Final = _demo_service(page, "shop/worker")
+    expect(worker).to_have_class(re.compile(r"\bidle\b"))
+    for text in worker.locator("summary span:visible").all():
+        assert _contrast(text) >= 4.5, text.inner_text()
+    assert errors == []
+
+
+def test_demo_the_side_column_grows_with_a_wide_window(page: Page, demo_site: str, errors: list[str]) -> None:
+    page.set_viewport_size({"width": 1920, "height": 900})
+    page.goto(demo_site)
+
+    box: typing.Final = page.locator(".layout > aside").bounding_box()
+
+    assert box is not None
+    assert box["width"] == pytest.approx(1920 * 0.32, abs=1)
+    assert errors == []