이전 메시지 불러오는 중…
박보검의 요청:
사이드바·탭 텍스트가 너무 어둡다는 Jason 지시. afaa9c(=RGB 175 170 156 = --wc-text-muted 다크값)가 문제였다.
[내가 한 것 — src/styles/wc/tokens.css (미커밋)]
- html.dark --wc-text-muted: 175 170 156 → 233 230 222 (더 밝은 화이트톤)
- html.dark --wc-text-subtle: 130 124 110 → 175 170 156 (한 단계 밝힘)
- 이걸로 탭(.wc-tab은 --wc-text-muted 사용)·캡션 등은 밝아진다.
[네가 확인·처리할 것]
- 사이드바 메뉴 라벨/배지(wc-shell-link-label, wc-shell-badge, wc-shell-drawer-label 등)가 어떤 색 토큰/값을 쓰는지 정의 위치 찾아서 확인. 만약 --wc-text-muted를 쓰면 위 토큰 변경으로 자동 해결(추가작업 불필요). 별도 어두운 색(afaa9c나 그보다 어두운 회색)을 직접 쓰면 동일하게 밝은 톤(--wc-text-muted 또는 233 230 222 계열)으로 바꿔줘. 활성/선택 강조색(gold accent)은 건드리지 말 것.
- design-kit/design-kit/tokens.css에도 동일 변경 propagate(원본 동기화) 권장 — tokens.css 주석이 "design-kit에서 propagate"라 함.
[부탁]
1) npm run build. 2) lax-dtb.pages.dev 배포 + URL. 3) tokens.css(+사이드바 수정분, +design-kit 동기화분)만 스테이징 커밋, precedents.ts/brain 제외, 메시지 끝 'Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>', 해시. 직전 커밋 bbe3f7a 위. 4) 라이브 검증(dev 동일본+Playwright): 사이드바 메뉴 라벨·탭 텍스트의 computed color가 더 밝아졌는지(175 170 156 → 233 230 222 또는 그 이상), afaa9c(rgb(175,170,156)) 그대로 남은 텍스트 있으면 콕 집어서. 활성 탭 gold 강조 유지 확인.
검증 완료. 프로덕션 별칭·배포 URL 모두 새 CSS 서빙 확인.
보고 — 다크 사이드바·탭 텍스트 밝기 상향
[무엇을 바꿨나]
src/styles/wc/tokens.css(html.dark):--wc-text-muted175 170 156 → 233 230 222,--wc-text-subtle130 124 110 → 175 170 156 (user 선반영분)design-kit/design-kit/tokens.css: 동일 값 원본 동기화 (내가 처리)- shell.tsx 등 사이드바 코드는 수정 불필요 — 모든 요소가 토큰 기반(
--wc-text-muted/-subtle)이라 자동 반영. 하드코딩 afaa9c 없음 확인. - 빌드/배포/커밋:
npm run build✓ (wc.css 31.6KB, 새 값 포함 확인)- 배포: https://44404210.lax-dtb.pages.dev (프로덕션 별칭 https://lax-dtb.pages.dev 도 동일 CSS 서빙 확인)
- 커밋 ddaae84 (부모 bbe3f7a 위), tokens.css 2개만 스테이징 — precedents.ts/brain 및 기타 미관련 변경 전부 제외 확인
[왜] Jason 지시: 사이드바·탭 텍스트가 afaa9c(rgb 175,170,156)로 너무 어두움. afaa9c는 --wc-text-muted였음.
[검증 결과] Playwright로 라이브 다크모드(html.dark) computed color 실측 (자가 DONE 아님):
| 요소 | 측정 색 | 판정 |
|---|---|---|
사이드바 메뉴 링크 .wc-shell-link |
rgb(233,230,222) | 밝아짐 ✓ (옛 afaa9c→화이트톤) |
| 활성/현재 링크 (gold) | rgb(240,215,148) | 강조 유지 ✓ |
--wc-text-muted 토큰 (라이브) |
233 230 222 | ✓ |
--wc-accent (gold) |
226 188 90 | 미변경 ✓ |
.wc-tab (탭 텍스트) |
--wc-text-muted 사용 → 233,230,222 |
※ 아래 주1 |
[정직하게 짚을 점]
.wc-tab은 현재 앱 화면에 실제 렌더되는 곳이 없습니다(컴포넌트는 정의돼 있으나 design-kit 쇼케이스 iframe 내부에만 존재). 다만.wc-tab이--wc-text-muted를 쓰고, 그 토큰이 라이브에서 233,230,222로 확정됐으므로 렌더되면 밝아집니다. Jason이 말한 "탭"이 다른 것(예: draft 워크스페이스.dw-tab, 설정 '기능' 탭)이라면 알려주시면 그쪽도 확인하겠습니다.- rgb(175,170,156)로 잡힌 요소 44개(배지 "작성가능/준비중", 드로어 섹션라벨 "메뉴/관리", 활동패널 타임스탬프 등)는 남은 옛 색이 아니라 새
--wc-text-subtle값입니다(옛 130,124,110 → 175,170,156, 한 단계 밝아짐)._tailwind-bridge.css가 slate-500/600도 이 토큰으로 매핑하고 있어 함께 밝아졌습니다. 단 이 secondary 텍스트가 공교롭게 옛 primary 밝기(afaa9c)와 같은 값이라, 이마저 어둡다고 느끼시면--wc-text-subtle을 한 단계 더 올리면 됩니다(예: 200 195 182).
[롤백 방법] git revert ddaae84 한 번이면 토큰 2파일 원복. 배포 롤백은 Cloudflare Pages에서 직전 deployment(bbe3f7a 기반)로 rollback.
참고: 검증 스크립트 scripts/verify-darktext.mjs와 playwright-core(--no-save)는 커밋에 포함하지 않았습니다(node_modules는 gitignore, 스크립트는 미추적 상태로 남김).