RomanNum3ral
/
paperclip
mirror of https://github.com/paperclipai/paperclip.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor(ui): consolidate byte-identical readable-text contrast pair (A2) 

Of the three flagged contrast-pair sites, only one pair is provably
byte-identical across files: #f8fafc/#111827 (readable light/dark text)
duplicated in lib/color-contrast.ts and lib/worktree-branding.ts. Export
it once from color-contrast.ts as READABLE_TEXT_LIGHT/READABLE_TEXT_DARK
and import it in worktree-branding.ts.

Left untouched as semantically distinct (per DECISION-SHEET.md A2 'verify
per-pair first'): ThemeContext.tsx's <meta theme-color> pair
(#18181b/#ffffff — browser chrome color, not contrast math; and #ffffff
!= #f8fafc), color-contrast.ts's DARK_BG/LIGHT_BG compositing backgrounds
(RGB objects), and worktree-branding.ts's #000000 hex-parse fallback.
Zero rendered-output change.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
scotttong 2026-07-06 16:17:13 -07:00
parent 5ecc0f9e47
commit 383460bb2e
2 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
ui/src/lib/color-contrast.ts
View File

@ -68,8 +68,18 @@ function composite(
};
}
const TEXT_LIGHT = "#f8fafc";
const TEXT_DARK = "#111827";
/**
* Shared readable-text pair (slate-50 / gray-900) for "pick light or dark
* text over an arbitrary background" logic. Byte-identical values were
* previously duplicated in lib/worktree-branding.ts (DECISION-SHEET.md A2);
* this is the single source. NOT the same thing as ThemeContext.tsx's
* <meta theme-color> pair (#18181b/#ffffff), which stays separate.
*/
export const READABLE_TEXT_LIGHT = "#f8fafc";
export const READABLE_TEXT_DARK = "#111827";
const TEXT_LIGHT = READABLE_TEXT_LIGHT;
const TEXT_DARK = READABLE_TEXT_DARK;
/**
* Pick a readable text color for a solid background.

4
ui/src/lib/worktree-branding.ts
View File

@ -1,3 +1,5 @@
import { READABLE_TEXT_LIGHT, READABLE_TEXT_DARK } from "./color-contrast";
export type WorktreeUiBranding = {
enabled: true;
name: string;
@ -46,7 +48,7 @@ function pickReadableTextColor(background: string): string {
(0.0722 * relativeLuminanceChannel(b));
const whiteContrast = 1.05 / (luminance + 0.05);
const blackContrast = (luminance + 0.05) / 0.05;
return whiteContrast >= blackContrast ? "#f8fafc" : "#111827";
return whiteContrast >= blackContrast ? READABLE_TEXT_LIGHT : READABLE_TEXT_DARK;
}
export function getWorktreeUiBranding(): WorktreeUiBranding | null {