refactor(theme): align tokens, token-ize hardcoded colors, clean up legacy#1186
Merged
Merged
Conversation
InlineDiffPreview used fixed-height virtualization rows (22px) while CSS allowed text wrapping (pre-wrap). Wrapped content beyond 22px was hidden by overflow:hidden, making long diff lines unreadable. Changes: - Switch virtualizer to dynamic measurement (measureElement) so wrapped rows report their real height instead of a fixed 22px estimate - Add ResizeObserver to invalidate cached measurements when the container width changes (wrapping depends on width) - Add content truncation for very large diffs (500 lines / 50k chars) with head+tail preview and a visible truncation notice - Remove overflow:hidden on diff-line__content; use overflow-wrap:anywhere - Apply measureElement ref to context-separator rows for measurement consistency
…egacy Phase P1-P7 theme token system cleanup across Web UI, Mobile Web, and Installer: P1: Fix Mobile Web sessions.scss referencing non-existent --color-error-* tokens P2: Unify CodeReviewToolCard fallback values and fix --color-danger → --color-error P3: Token-ize TurnHistoryPanel (~35 hardcoded Tailwind grays), remove @media dark block P4: Complete Installer variables.css with 13 missing tokens, align fallbacks to bitfun-dark P5: Align tokens.scss SCSS fallbacks with dark-theme.ts runtime values (34 properties) P6: Token-ize ~130+ hardcoded colors across 20 component files (semantic colors → tokens) P7: Remove unused legacy -gray-* series and orphaned -text-default Additional fixes found during review: - Fix --color-text-disabled misused as background (→ opacity-disabled) - Fix --color-scrollbar-thumb wrong variable name (→ --scrollbar-thumb) - Fix --shadow-sm fallback mismatch - Fix --color-danger-600/--color-error-600/--color-error-alpha/--color-error-rgb references - Fix InlineDiffPreview light theme gutter using dark-only hover variants Verified: type-check 0 errors, lint 0 errors, 12 theme/layout tests passed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Systematic theme token cleanup across Web UI, Mobile Web, and Installer — 7 phases ordered by increasing scope, each independently verifiable.
Changes by Phase
P1: Mobile Web token name fix (1 file)
sessions.scss: Fix references to non-existent--color-error-500/50/100tokens →--color-error/--color-error-bgP2: CodeReviewToolCard fallback unification (1 file)
var()fallback values to matchdark-theme.ts: success→#34d399, warning→#f59e0b, error→#ef4444, info→#a1a1aa--color-danger(never defined) →--color-errorP3: TurnHistoryPanel token-ization (1 file)
@media (prefers-color-scheme: dark)block (213→135 lines)P4: Installer variables.css completion (1 file)
bitfun-darkruntime themeP5: tokens.scss ↔ dark-theme.ts alignment (1 file)
dark-theme.tsruntime valuesdark-theme.tsgit colorsP6: Bulk hardcoded color token-ization (20 files)
--color-success,--color-error,--color-warning,--color-accent-*,--git-color-*)@media (prefers-color-scheme: dark)blocks from TurnRollbackButton, TurnHistoryPanelP7: Legacy cleanup (1 file)
$color-gray-*series (9 SCSS vars + 9 CSS var injections, zero references)$button-text-default(zero references)Additional fixes found during adversarial review
--color-text-disabledmisused as button background →opacity: var(--opacity-disabled)--color-scrollbar-thumbwrong variable name →--scrollbar-thumb(pre-existing bug)--shadow-smfallback value mismatch--color-danger-600/--color-error-600/--color-error-alpha/--color-error-rgbreferences (pre-existing undefined tokens)Cross-product impact
theme.rsbootstrap, not affected by tokens.scss changesVerification
pnpm run type-check:web— 0 errorspnpm run lint:web— 0 errors (3 pre-existing warnings unrelated)pnpm --dir src/mobile-web run type-check— 0 errorspnpm --dir BitFun-Installer run type-check— 0 errors