Improve light theme contrast

This commit is contained in:
Server 2026-08-10 00:04:50 +00:00
parent 34211fdc90
commit 05589c1c06
2 changed files with 15 additions and 5 deletions

View file

@ -1,15 +1,18 @@
:root { :root {
--shell: #ffffff; --shell: #ffffff;
--surface: #f2f2f2; --surface: #f2f2f2;
--elevated: #e5e5e5; --elevated: #d4d4d4;
--control: #dedede; --control: #dedede;
--active: #cacaca; --active: #cacaca;
--selection-bg: #111111;
--selection-text: #ffffff;
--selection-number: #bcbcbc;
--text: #111111; --text: #111111;
--muted: #6d6d6d; --muted: #6d6d6d;
--faint: #9a9a9a; --faint: #9a9a9a;
--border: #c9c9c9; --border: #c9c9c9;
--tree-line: #c5c5c5; --tree-line: #c5c5c5;
--shadow: 0 24px 70px rgba(0, 0, 0, .16); --shadow: 0 24px 70px rgba(0, 0, 0, .4);
color-scheme: light; color-scheme: light;
} }
@ -19,6 +22,9 @@
--elevated: #222222; --elevated: #222222;
--control: #242424; --control: #242424;
--active: #686868; --active: #686868;
--selection-bg: #f0f0f0;
--selection-text: #050505;
--selection-number: #555555;
--text: #f4f4f4; --text: #f4f4f4;
--muted: #a5a5a5; --muted: #a5a5a5;
--faint: #747474; --faint: #747474;
@ -58,8 +64,8 @@ button { color: inherit; }
.tree-link { display: flex; width: 100%; min-height: 32px; align-items: baseline; gap: 5px; padding: 4px 10px; border: 0; border-radius: 18px; color: var(--text); background: transparent; cursor: pointer; text-align: left; transition: background .15s ease, color .15s ease; } .tree-link { display: flex; width: 100%; min-height: 32px; align-items: baseline; gap: 5px; padding: 4px 10px; border: 0; border-radius: 18px; color: var(--text); background: transparent; cursor: pointer; text-align: left; transition: background .15s ease, color .15s ease; }
.tree-link:hover { background: var(--control); } .tree-link:hover { background: var(--control); }
.tree-link.active { background: var(--active); } .tree-link.active { background: var(--active); }
.sidebar-header-buttons .header-link.active, .desktop-sidebar .tree-link.active, .mobile-menu-view .header-link.active, .mobile-menu-view .tree-link.active { color: #050505; background: #f0f0f0; } .sidebar-header-buttons .header-link.active, .desktop-sidebar .tree-link.active, .mobile-menu-view .header-link.active, .mobile-menu-view .tree-link.active { color: var(--selection-text); background: var(--selection-bg); }
.desktop-sidebar .tree-link.active .tree-number, .mobile-menu-view .tree-link.active .tree-number { color: #555; } .desktop-sidebar .tree-link.active .tree-number, .mobile-menu-view .tree-link.active .tree-number { color: var(--selection-number); }
.tree-number { flex: 0 0 auto; color: var(--muted); } .tree-number { flex: 0 0 auto; color: var(--muted); }
.tree-title { min-width: 0; overflow-wrap: anywhere; } .tree-title { min-width: 0; overflow-wrap: anywhere; }

View file

@ -78,7 +78,11 @@ def test_all_endpoints_and_self_contained_build(tmp_path):
assert "flex: 1 1 auto; flex-direction: column" in html assert "flex: 1 1 auto; flex-direction: column" in html
assert "padding: 0 18px 22px" in html assert "padding: 0 18px 22px" in html
assert "--desktop-sidebar-width: clamp(270px, 25vw, 400px)" in html assert "--desktop-sidebar-width: clamp(270px, 25vw, 400px)" in html
assert ".mobile-menu-view .tree-link.active { color: #050505; background: #f0f0f0; }" in html assert "--selection-bg: #111111" in html
assert "--selection-bg: #f0f0f0" in html
assert ".mobile-menu-view .tree-link.active { color: var(--selection-text); background: var(--selection-bg); }" in html
assert "--elevated: #d4d4d4" in html
assert "--shadow: 0 24px 70px rgba(0, 0, 0, .4)" in html
assert "elements.pageSurface.scrollTo" in html assert "elements.pageSurface.scrollTo" in html
assert "font-family: system-ui; font-size: 16px" in html assert "font-family: system-ui; font-size: 16px" in html
assert ".glyph-button, .refresh-glyph { font-family: Arial" in html assert ".glyph-button, .refresh-glyph { font-family: Arial" in html