chore(desktop): clean up CSS token governance by xuruiray · Pull Request #1085 · apache/maka

xuruiray · 2026-07-16T08:23:03Z

Summary

split the settings stylesheet by concern, moving About, Bot, WeChat, and shared form rules out of theme-preview.css
replace phantom and dead CSS tokens, and introduce a governed --brand-wechat token for the QR flow
name renderer timing constants and replace repeated static icon/transition inline styles
use semantic settings tokens for selected/active states and focus rings in the extracted stylesheets
document the established camelCase selector dialect for styles/settings/** in both CSS governance guides

Why

theme-preview.css had become a grab bag for unrelated settings surfaces, while several component rules depended on fallback-only or raw color values. The cleanup makes ownership explicit without changing the settings component APIs.

The issue is still reproducible on current main: unrelated settings selectors remain in theme-preview.css, raw #07C160 values and fallback-only tokens are still present, and the extracted Bot/Form rules are absent.

Closes#1046.

Validation

Rebased onto fd6bd9e3 (origin/main) and validated from a clean dependency install:

npm run lint — passed (1621 files)
node scripts/check-dead-css.mjs --check — passed
npm run build — passed
npm run typecheck — passed
npm --workspace @maka/desktop test — passed (2571/2571)
npx playwright test --config e2e/playwright.config.ts — passed (25/25 real Electron E2E tests)

Visual validation

captured 13 Settings fixtures in light/dark themes at 1280px/990px viewports: 52 PR screenshots and 52 same-machine origin/main controls
39/52 screenshot pairs were pixel-identical
the remaining 13 pairs differed only in the rendered commit SHA, isolated temporary workspace path, or right-edge scrollbar visibility; manual review found no layout, clipping, overlap, or color regression
keyboard navigation to the shared Settings combobox retained a visible focus ring, at least 34px control height, and no horizontal overflow

Review focus

theme-preview.css is reduced from 670 lines on current main to 225 lines
About, Bot, WeChat, and shared form ownership moves to dedicated stylesheets
no settings component API or user-facing behavior change is intended

Summary: - use the governed brand token for About accents - use focus-ring and focus-width tokens for settings selects Rationale: - satisfy the design-system governance contracts found during local validation Tests: - npm run lint - npm run build - npm run typecheck - npm --workspace @maka/desktop test Co-authored-by: Codex <codex@openai.com>

xuruiray · 2026-07-16T12:55:58Z

Visual validation — representative screenshots

Local validation on commit 20354e8c:

13 Settings fixtures × light/dark × 1280px/990px
52 PR screenshots compared with 52 same-machine origin/main controls
39/52 pairs were pixel-identical
the remaining 13 differed only in the rendered commit SHA, isolated temporary workspace path, or right-edge scrollbar visibility
manual review found no layout, clipping, overlap, or color regression
Electron E2E: 25/25 passed

About · light · 1280px

Remote access · dark · 990px

Settings Remote Access — dark theme, 990px

Appearance · dark · 1280px

Settings Appearance — dark theme, 1280px

Keyboard focus ring

Astro-Han · 2026-07-16T23:05:37Z

LGTM

…nip zero-hint, resume hook, QR fixture (#1241) * feat(core): add settings-bots-onboarding visual-smoke scenario + botOnboardingProvider * feat(desktop): hold-in-waiting bot onboarding adapter + fixture state for QR capture * feat(desktop): auto-open bot scan-login modal under settings-bots-onboarding fixture * chore(scripts): register settings-bots-onboarding in capture + audit scenario lists * fix(desktop): wait for QR paint before auto-capturing bot-onboarding fixture * docs(notes): frontend architecture map — measured baseline + 8 staged rounds (2026-07-19) Re-ran the census (wc over non-test TS/TSX for desktop main/preload/renderer + packages/ui; CSS totals; top-10 hotspot table incl. visual-smoke-fixture.ts marked OUT-OF-SCOPE other-sessions' territory). Staged R1 knip de-rot, R2 app-shell resume-cluster extraction, R3 visual-smoke split (BLOCKED on concurrent fixture branch), R4-R6 main.ts extractions (require maintainer-approved contract re-pins — registerIpc / startup / tool-assembly / modelSupportsVision direct-pinned), R7 provider-connection-detail decomposition (needs its own blade plan), R8 CSS raw-hex residue (verified clean on this tip — #1085 already converted it). * chore(knip): de-rot config — clear all 13 stale hints (R1) knip reported 13 configuration hints (7 desktop + 6 ui), all redundant/stale config, zero code impact: - Drop 'overlayscrollbars' from desktop ignoreDependencies — now redundant (knip no longer flags it; the package is owned by packages/ui and only referenced there). The overlay-scrollbars contract forbids declaring it as a *desktop dependency*, not as an ignore — removing a redundant ignore is compatible and coverage is unchanged. - Delete the dead 'src/renderer/**/*.test.ts' entry glob (no matches — renderer has zero test files; all 338 desktop tests live under src/main/__tests__/*.test.ts). - Drop 11 redundant explicit entries knip already auto-detects: desktop preload.ts / renderer/main.tsx / playwright.config.ts / .storybook/main.ts / dev.mjs (vite / playwright / storybook / npm-scripts plugins), and all 6 ui entries (index.ts, icons.tsx, artifact-preview-registry.ts, assistant-stream.ts, maka-uri.ts, smooth-stream.ts) resolved from packages/ui package.json#exports. Non-redundant entries kept verbatim (main.ts, overlay/*, main test glob, e2e specs, storybook preview, stories, browser-observe-act-smoke.mjs, both ui test globs). No broad ignores added — coverage is not weakened. knip --workspace apps/desktop and packages/ui now both exit 0 AND report zero config hints (was: exit 0 with 13 hints). * refactor(renderer): extract app-shell resume cluster into use-shell-resume (R2) The #1223 safe-boundary resume cluster moves out of app-shell.tsx into a new use-shell-resume.ts hook, following the use-shell-connections / use-shell-chat-model house style (options object; state + handler returned; stable identities preserved). Pure move, zero behavior change: the two useState declarations (resumePendingSessionId, resumeParkDescriptionBySession) and the resumeInterruptedSession handler move verbatim; activeId/toastApi/shellCopy/uiLocale are injected as options. app-shell keeps the banner JSX wiring (safeResumeAction=) and the sendWithAttachments guard. resumeParkToastCopy is no longer imported into app-shell (it now lives in the hook). app-shell.tsx 1686 -> 1654 (-32 lines). Contract re-pin (never deletes coverage): runtime-resume-routing-contract.test.ts read the handler-shape assertions (resumeInterruptedSession / resumeLatest(sessionId) / resumeParkToastCopy / no rejectionReasons.join) from app-shell.tsx single-file; they now read use-shell-resume.ts where that logic lives, while the app-shell-specific assertions (sendWithAttachments '/resume' guard, safeResumeAction= wiring) still read app-shell.tsx. use-shell-resume.ts added to renderer-shell-source-helpers sourcePaths (Round B/E precedent) so combined-source contracts see it. Gates: desktop 2740/2740, ui 196/196, typecheck 0, check-dead-css clean, knip desktop+ui exit 0, AUDIT_PORT_BASE=23900 alignment auditor exit 0 (all 10 fixtures clean, real renderer). CDP turn-narrative branch-vs-baseline (real Electron, light+dark 1280) byte-identical (sha256 match) — proven render no-op.

xuruiray · 2026-07-16T08:23:03Z

Summary

split the settings stylesheet by concern, moving About, Bot, WeChat, and shared form rules out of theme-preview.css
replace phantom and dead CSS tokens, and introduce a governed --brand-wechat token for the QR flow
name renderer timing constants and replace repeated static icon/transition inline styles
use semantic settings tokens for selected/active states and focus rings in the extracted stylesheets
document the established camelCase selector dialect for styles/settings/** in both CSS governance guides

Why

theme-preview.css had become a grab bag for unrelated settings surfaces, while several component rules depended on fallback-only or raw color values. The cleanup makes ownership explicit without changing the settings component APIs.

The issue is still reproducible on current main: unrelated settings selectors remain in theme-preview.css, raw #07C160 values and fallback-only tokens are still present, and the extracted Bot/Form rules are absent.

Closes#1046.