fix(lynx-css): refresh text color on theme change by junghyeonsu · Pull Request #1653 · daangn/seed-design

junghyeonsu · 2026-06-09T09:32:50Z

요약

Lynx에서 테마(라이트↔다크) 전환 시 <text>의 color가 이전 테마 색으로 남아 갱신되지 않던 버그를 수정합니다.

근본 원인

SEED Text는 color를 inline style의 var()로 겁니다 (handleColor → vars.$color.fg.neutral === "var(--seed-color-fg-neutral)").
Lynx 엔진은 CSS variable 변경 시 rule(class/type selector) 기반 var()만 invalidation을 추적하고, inline style의 var()는 재계산하지 않습니다 (enableCSSInlineVariables: true도 초기 resolve만 수행).
그래서 테마 전환으로 --seed-color-fg-neutral 값이 바뀌어도 <text>의 inline color가 갱신되지 않습니다. (반면 ThemingPage의 text-fg-* class color는 정상 갱신 — 방증)

변경 사항

packages/lynx-qvism-preset/src/global.ts에 글로벌 규칙을 추가하고 bun qvism:generate로 lynx-css/base.css·all.css를 재생성합니다:

text {
  background-color: var(--seed-color-bg-transparent);
}

type selector(= CSS rule)의 var()가 테마 전환 시 재계산되며 element re-paint를 유발 → 같은 <text>의 inline color까지 함께 갱신됩니다.
--seed-color-bg-transparent는 light #0000 / dark #fff0로 alpha=0(시각적 무해)이지만 RGB가 달라서 트리거됩니다.

⚠️ 머지 전 검증 필요 (실기기)

메커니즘은 Lynx 엔진 코드로 거의 확정했으나, 실동작은 시뮬레이터/실기기 확인이 필요합니다:

examples/lynx-spa에서 Text 컴포넌트(inline color)가 테마 전환 시 즉시 갱신되는지
동작하지 않으면 fallback(근본 해결 또는 useTextColor 훅) 검토

범위 밖

근본 해결(color를 inline var() → class 기반으로 전환)은 범위가 커서 별도 과제로 분리합니다.
icon(useIconColor)은 <image>의 tint-color attribute 문제로 메커니즘이 달라 그대로 유지합니다.

🤖 Generated with Claude Code

Summary by CodeRabbit

버그 수정
- 라이트/다크 테마 전환 시 텍스트 색상이 갱신되지 않던 문제를 해결했습니다. 텍스트 배경 처리를 개선해 테마 변경 시 색상 일관성이 유지됩니다.
Chore
- 배포용 변경 기록(Changeset)을 추가했습니다.

changeset-bot · 2026-06-09T09:32:58Z

🦋 Changeset detected

Latest commit: c69e305

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@seed-design/lynx-css	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

coderabbitai · 2026-06-09T09:33:17Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 52561551-5cb8-4913-8dd3-d2383e1b11c3

📥 Commits

Reviewing files that changed from the base of the PR and between c122faf and c69e305.

📒 Files selected for processing (2)

packages/lynx-css/all.css
packages/lynx-css/all.min.css

🚧 Files skipped from review as they are similar to previous changes (1)

packages/lynx-css/all.css

📝 Walkthrough

Walkthrough

text 요소의 배경색에 --seed-color-bg-transparent를 적용하도록 CSS 및 Lynx 프리셋 글로벌 스타일을 업데이트하고, 해당 변경을 반영하는 changeset을 추가했습니다.

변경 사항

Lynx 텍스트 요소 테마 전환 수정

레이어 / 파일	요약
CSS 기본 텍스트 요소 스타일 `packages/lynx-css/all.css`, `packages/lynx-css/base.css`, `packages/lynx-css/base.min.css`	`text` 선택자에 `background-color: var(--seed-color-bg-transparent)` 규칙을 추가했습니다.
TypeScript 프리셋 글로벌 스타일 업데이트 `packages/lynx-qvism-preset/src/global.ts`	`globalCss`의 `text` 규칙에 `backgroundColor: "var(--seed-color-bg-transparent)"`를 추가하고 동작/주의사항을 설명하는 주석을 포함했습니다.
Changeset 문서화 `.changeset/swift-pandas-grin.md`	`@seed-design/lynx-css` 패키지의 patch 변경을 선언하고 라이트/다크 테마 전환 시 텍스트 색상 갱신 문제 수정을 명시했습니다.

예상 코드 리뷰 노력

🎯 2 (단순) | ⏱️ ~10분

시

🐰 투명한 배경으로 숨을 쉬네,
테마 바뀌어도 글빛은 그대로,
변수 하나로 색은 따라오고,
밤과 낮 모두 고요히 빛나네. ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR 제목이 주요 변경 사항을 명확하게 요약하고 있습니다. 테마 변경 시 텍스트 색상 새로고침 문제 해결이 주요 목표이며, 제목이 이를 정확히 반영하고 있습니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch lynx-text-theme-color-fix

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Lynx does not re-resolve inline-style var() when the theme changes (only rule-based var() is tracked for style invalidation), so <text> color set via an inline var() stays stale after a theme switch. Add a global `text { background-color: var(--seed-color-bg-transparent) }` rule whose rule-based var() recalculation forces an element re-paint that also refreshes the inline color. bg-transparent has alpha 0 in both themes, so there is no visual side effect. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

# Conflicts: # packages/lynx-css/all.min.css

github-actions · 2026-06-09T14:41:19Z

Alpha Preview (Stackflow SPA)

Branch Preview URL: https://lynx-text-theme-color-fix.seed-design-stackflow-spa.pages.dev
Preview URL: https://14599c8a.seed-design-stackflow-spa.pages.dev
Commit: c69e305

github-actions · 2026-06-09T14:41:24Z

Alpha Preview (Storybook)

Branch Preview URL: https://lynx-text-theme-color-fix.seed-design-storybook.pages.dev
Preview URL: https://26885cc4.seed-design-storybook.pages.dev
Commit: c69e305

github-actions · 2026-06-09T14:48:54Z

Alpha Preview (Docs)

Branch Preview URL: https://lynx-text-theme-color-fix.seed-design.pages.dev
Preview URL: https://45c88a97.seed-design.pages.dev
Commit: c69e305

junghyeonsu self-assigned this Jun 9, 2026

junghyeonsu force-pushed the lynx-text-theme-color-fix branch from bac557f to c122faf Compare June 9, 2026 13:13

Merge remote-tracking branch 'origin/dev' into lynx-text-theme-color-fix

c69e305

# Conflicts: # packages/lynx-css/all.min.css

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(lynx-css): refresh text color on theme change#1653

fix(lynx-css): refresh text color on theme change#1653
junghyeonsu wants to merge 2 commits into
devfrom
lynx-text-theme-color-fix

junghyeonsu commented Jun 9, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

changeset-bot Bot commented Jun 9, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Jun 9, 2026 •

edited

Loading

Walkthrough

변경 사항

예상 코드 리뷰 노력

시

Uh oh!

github-actions Bot commented Jun 9, 2026

Uh oh!

github-actions Bot commented Jun 9, 2026

Uh oh!

github-actions Bot commented Jun 9, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

junghyeonsu commented Jun 9, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

요약

근본 원인

변경 사항

⚠️ 머지 전 검증 필요 (실기기)

범위 밖

Summary by CodeRabbit

Uh oh!

changeset-bot Bot commented Jun 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

coderabbitai Bot commented Jun 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

변경 사항

예상 코드 리뷰 노력

시

Uh oh!

github-actions Bot commented Jun 9, 2026

Alpha Preview (Stackflow SPA)

Uh oh!

github-actions Bot commented Jun 9, 2026

Alpha Preview (Storybook)

Uh oh!

github-actions Bot commented Jun 9, 2026

Alpha Preview (Docs)

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

junghyeonsu commented Jun 9, 2026 •

edited by coderabbitai Bot

Loading

changeset-bot Bot commented Jun 9, 2026 •

edited

Loading

coderabbitai Bot commented Jun 9, 2026 •

edited

Loading