CRT/waybetter
1
0
Fork 0
Code Issues Pull requests Releases Packages 2 Activity

shell: menus readable under every theme; account rows no longer collapse in Windows 98

Browse source 
Owner, live 2026-10-02: the account switcher's rows overlapped (names and handles collided) and
"Not signed in yet" was unreadable. Causes: edges.css forced every menu button to 26px, which squashed the
two-line account rows; the status inks (#f0b14a signed out, #ff8a80 errors) and the hint ink (a 38% fade of
the secondary text) were Night Ink literals, 2.1 to 3.6:1 on other themes' menus. Now the forced height is
gone, status, hint and secondary inks are measured on the menu surface (the face in bevelled themes) at
4.5:1 (--wb-c-warn, --wb-c-danger-ink, --wb-c-faint, --wb-c-muted), every line of a selected bevelled row
takes the selection's ink, and wayBetter's own default hint ink is legible. Checked: every shell menu
(accounts, app menu, tab menu, workspaces, palette) under 14 themes with an overlap and contrast scan
(verification/design-pass/1.0.2/menus-shots.mjs); new frame test for the inks.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
CRTkafa 2026-10-02 01:43:36 +07:00
parent a6dc340747
commit aa5f50c4a9
6 changed files with 30 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

9
packages/shell/src/frame/chromeTheme.ts
View file

@ -78,9 +78,13 @@ export function chromeVars(theme: ChromeTheme, own = false): Record<string, stri
'--wb-c-ground': bg, '--wb-c-chrome': surface, '--wb-c-field': mix(surface, elevated, 0.45),
'--wb-c-raised': elevated, '--wb-c-raised-2': mix(elevated, border, 0.45),
'--wb-c-line': border, '--wb-c-line-soft': mix(border, bg, 0.45), '--wb-c-line-strong': mix(border, text, 0.14),
'--wb-c-text': text, '--wb-c-text-2': mix(text, muted, 0.4), '--wb-c-muted': muted, '--wb-c-faint': mix(muted, bg, 0.38),
'--wb-c-text': text, '--wb-c-text-2': mix(text, muted, 0.4), '--wb-c-muted': legible(muted, elevated, 4.5),
// Shortcut hints and section labels sit on the menus' raised surface: they keep 4.5:1 there (a 38% fade toward the ground read 2.1 to 3.6:1).
'--wb-c-faint': legible(mix(muted, bg, 0.38), elevated, 4.5),
'--wb-c-text-rgb': channels(text), '--wb-c-accent': accent, '--wb-c-accent-rgb': channels(accent), '--wb-c-accent-ink': ink,
'--wb-c-scheme': dark ? 'dark' : 'light',
// Status inks (a signed-out account, an error) readable on the menus' raised surface, whatever its shade.
'--wb-c-warn': legible(dark ? '#f0b14a' : '#9a5b00', elevated, 4.5), '--wb-c-danger-ink': legible(dark ? '#ff8a80' : '#b3261e', elevated, 4.5),
// The chrome's marks (active tab, palette edge) in the theme's accent instead of wayBetter's brush.
'--wb-c-brush': `linear-gradient(90deg, ${accent}, ${accent})`,
...(dark ? {} : { '--wb-c-shadow-pop': `0 18px 44px -14px rgba(${hexToRgb(mix(text, bg, 0.2)).join(', ')}, .28), 0 3px 10px rgba(0, 0, 0, .08)` }),
@ -114,6 +118,9 @@ function bevelVars(colors: NonNullable<ChromeTheme['colors']>): Record<string, s
'--wb-c-title-from': from, '--wb-c-title-to': colors.accent, '--wb-c-title-text': titleText,
// Selected rows (menus, lists): the title bar's own color, as in a 98 menu.
'--wb-c-select': from, '--wb-c-select-text': titleText,
// Menus are the face: status inks are measured on it.
'--wb-c-muted': legible(colors.muted, face, 4.5), '--wb-c-faint': legible(colors.muted, face, 4.5),
'--wb-c-warn': legible('#806000', face, 4.5), '--wb-c-danger-ink': legible('#a00000', face, 4.5),
};
}