feat: overridable props #809
Conversation
|
Walkthrough이 변경사항은 CSS 색상 및 배경 관련 스타일에 대해 오버라이드 가능한 CSS 커스텀 프로퍼티( Changes
Sequence Diagram(s)sequenceDiagram
participant ReactComponent
participant CSS
participant UserCSS
ReactComponent->>CSS: 스타일 속성에 --seed-box-color, --seed-box-background 등 사용
UserCSS->>CSS: (선택적으로) --seed-box-color, --seed-box-background 변수 정의
CSS->>ReactComponent: var(--seed-box-color, 기존값)로 스타일 적용
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
Note ⚡️ Unit Test Generation - BetaCodeRabbit's unit test generation is now available in Beta! Automatically generate comprehensive unit tests for your code changes, ensuring better test coverage and catching edge cases you might miss. Our AI analyzes your code structure and creates tests that follow best practices and your project's testing patterns. Learn more here, or just try it under ✨ Finishing Touches. ✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Deploying seed-design-v3 with
|
| Latest commit: |
0159837
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://47c8de2e.seed-design.pages.dev |
| Branch Preview URL: | https://feat-overridable-props.seed-design.pages.dev |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 10
♻️ Duplicate comments (6)
packages/css/base.css (1)
172-175: active 상태도 동일 순환 참조 문제
background: var(--seed-box-background, var(--seed-box-background--active));
위에서--seed-box-background--active값을 동일 변수로 지정해 두어 결국 루프가 반복됩니다. 위 코멘트와 같이 기본값을 넣어 순환을 끊어주세요.packages/css/recipes/badge.css (1)
47-49: 이 코멘트는 위와 동일한 논리로 이미 언급되었습니다.packages/css/recipes/extended-fab.css (1)
44-45: 아이콘 색상도 오버라이드 가능하도록 처리 필요위
neutralSolid제안과 동일한 이유입니다.- --seed-prefix-icon-color: var(--seed-color-fg-neutral); + --seed-prefix-icon-color: var(--seed-box-color, var(--seed-color-fg-neutral));packages/css/recipes/action-button.css (2)
70-78: 위 아이콘 색상 관련 제안이 동일하게 적용됩니다.
92-100: 위 아이콘 색상 관련 제안이 동일하게 적용됩니다.packages/css/all.css (1)
4260-4267: 동일 문제::selected→ 속성 기반 선택자로 교체 필요이곳 역시 위와 동일한 이유로 동작하지 않습니다. 위 코멘트를 참고하여 전역적으로 수정 바랍니다.
🧹 Nitpick comments (11)
packages/css/recipes/manner-temp-badge.css (1)
20-42: 레벨별 스타일 반복을 공통 Mixin으로 추출 고려
레벨-별로 동일한 패턴이 6회 반복되고 있습니다.
Sass/PostCSS mixin‧loop(예:@each $level in l1,l2…)으로 축약하면 유지보수성이 높아집니다.packages/css/recipes/snackbar.css (1)
55-56:unset사용 시 구형 브라우저 호환성 검토 필요
background-color: unset는 IE 등 레거시 브라우저에서 지원되지 않습니다. 필요 시transparent로 변경을 고려하세요.packages/css/recipes/action-sheet.css (1)
14-15: 오버라이드 변수 적용은 일관적이나 명시적 border‐radius / shadow까지 검토 권장배경과 색상에는
--seed-box-*변수를 잘 적용하셨습니다. 다만 같은 컴포넌트에서 시각적으로 연결되는 border-radius, shadow 등은 그대로라 테마 변경 시 톤이 어긋날 수 있습니다. 필요하다면 추가로 overridable 변수 범위를 넓히는 것도 고려해주세요.Also applies to: 45-46, 108-109, 118-119
packages/css/recipes/help-bubble.css (1)
42-49: 아이콘/화살표 색상도 변수화 고려타이틀·본문·닫기버튼은
--seed-box-color로 치환됐지만.seed-help-bubble__arrow의fill은 고정값(--seed-color-bg-neutral-solid) 그대로입니다. 말풍선 배경을 덮어쓸 때 화살표 색이 불일치할 수 있으니 동일 변수 적용을 검토해 주세요.Also applies to: 60-61
packages/css/recipes/action-button.css (1)
189-194: 중복 fallback 제거 제안
color에var(--seed-box-color, var(--seed-box-color))처럼 동일 변수를 두 번 쓰고 있습니다. 두 번째 인자는 불필요하므로 단순화하세요.- color: var(--seed-box-color, var(--seed-box-color)); + color: var(--seed-box-color);packages/css/recipes/radio.css (1)
27-28:none대신transparent사용 고려
background-color: var(--seed-box-background, none);에서none은 컬러 값이 아니기 때문에 브라우저에 따라 상속·계산 단계에서 예기치 않은 결과(예: 상위 배경색 적용)로 이어질 수 있습니다.
transparent가 의도에 더 부합하며 접근성 툴에서도 안정적으로 인식됩니다.- background-color: var(--seed-box-background, none); + background-color: var(--seed-box-background, transparent);packages/css/recipes/tabs.css (1)
53-55: border-bottom에도 동일한 오버라이드 변수 적용 필요
color는--seed-box-color로 감쌌지만 바로 아래border-bottom은 기존 변수만 사용하고 있습니다.
테마 일관성을 위해 동일 패턴을 적용해 주세요.- border-bottom: 2px solid var(--seed-color-fg-neutral); + border-bottom: 2px solid var(--seed-box-color, var(--seed-color-fg-neutral));packages/css/recipes/select-box.css (1)
10-10: box-shadow에 border 오버라이드 누락초기 상태의
box-shadow가 여전히var(--seed-color-stroke-neutral)을 하드코딩하고 있습니다.
다른 border 계열 속성과 동일하게--seed-box-border-color로 감싸는 것이 일관성에 좋습니다.- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral); + box-shadow: inset 0 0 0 1px var(--seed-box-border-color, var(--seed-color-stroke-neutral));packages/css/recipes/text-field.css (1)
78-85:background: none에서 투명 배경 보장 여부 확인
.seed-text-field__value에background: var(--seed-box-background, none);이 사용됩니다. Radio와 동일하게none대신transparent가 더 안전합니다.packages/css/all.css (2)
74-83:var(--foo, var(--foo))중복 폴백 제거 권장
--seed-box-*변수에 동일 변수를 두 번 중첩-지정하면 의미가 없습니다. 가독성만 떨어지고 번들 사이즈만 늘어납니다.- background: var(--seed-box-background, var(--seed-box-background)); - color: var(--seed-box-color, var(--seed-box-color)); - ... - border-color: var(--seed-box-border-color, var(--seed-box-border-color)); + background: var(--seed-box-background); + color: var(--seed-box-color); + ... + border-color: var(--seed-box-border-color);이 패턴은 파일 전반에 반복되므로 한 번에 리팩터링하시길 권장합니다.
4720-4726: 색상 폴백 중복
var(--seed-box-color, var(--seed-box-color))는 불필요합니다. 한 번만 참조해도 충분합니다.- color: var(--seed-box-color, var(--seed-box-color)); + color: var(--seed-box-color);같은 패턴이 다수 있으니 검색-치환 권장드립니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (45)
ecosystem/qvism/core/src/parser.ts(2 hunks)packages/css/all.css(98 hunks)packages/css/base.css(4 hunks)packages/css/base.min.css(1 hunks)packages/css/recipes/action-button.css(1 hunks)packages/css/recipes/action-chip.css(1 hunks)packages/css/recipes/action-sheet-item.css(3 hunks)packages/css/recipes/action-sheet.css(4 hunks)packages/css/recipes/app-bar-main.css(1 hunks)packages/css/recipes/app-bar.css(1 hunks)packages/css/recipes/app-screen.css(3 hunks)packages/css/recipes/badge.css(1 hunks)packages/css/recipes/bottom-sheet.css(4 hunks)packages/css/recipes/callout.css(4 hunks)packages/css/recipes/checkbox.css(2 hunks)packages/css/recipes/chip-tabs.css(1 hunks)packages/css/recipes/chip.css(4 hunks)packages/css/recipes/contextual-floating-button.css(1 hunks)packages/css/recipes/control-chip.css(2 hunks)packages/css/recipes/dialog.css(3 hunks)packages/css/recipes/extended-action-sheet-item.css(3 hunks)packages/css/recipes/extended-action-sheet.css(4 hunks)packages/css/recipes/extended-fab.css(1 hunks)packages/css/recipes/fab.css(2 hunks)packages/css/recipes/floating-action-button.css(1 hunks)packages/css/recipes/help-bubble.css(3 hunks)packages/css/recipes/identity-placeholder.css(1 hunks)packages/css/recipes/inline-banner.css(2 hunks)packages/css/recipes/link-content.css(2 hunks)packages/css/recipes/manner-temp-badge.css(1 hunks)packages/css/recipes/manner-temp.css(1 hunks)packages/css/recipes/notification-badge.css(1 hunks)packages/css/recipes/radio.css(1 hunks)packages/css/recipes/reaction-button.css(1 hunks)packages/css/recipes/segmented-control.css(3 hunks)packages/css/recipes/select-box.css(5 hunks)packages/css/recipes/skeleton.css(1 hunks)packages/css/recipes/snackbar.css(4 hunks)packages/css/recipes/switch.css(1 hunks)packages/css/recipes/tabs.css(3 hunks)packages/css/recipes/text-field.css(4 hunks)packages/css/recipes/text.css(1 hunks)packages/css/recipes/toggle-button.css(1 hunks)packages/react/src/components/ActionButton/ActionButton.tsx(2 hunks)packages/react/src/utils/styled.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/docs.mdc)
**/*.{ts,tsx}: Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
Use TypeScript for all code; prefer interfaces over types.
Avoid enums; use maps instead.
Use the "function" keyword for pure functions.
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
Files:
packages/react/src/utils/styled.tsxpackages/react/src/components/ActionButton/ActionButton.tsxecosystem/qvism/core/src/parser.ts
**/*.tsx
📄 CodeRabbit Inference Engine (.cursor/rules/docs.mdc)
**/*.tsx: Structure files: exported component, subcomponents, helpers, static content, types.
Use functional components with TypeScript interfaces.
Use declarative JSX.
Use Tailwind CSS for styling.
Implement responsive design with Tailwind CSS; use a mobile-first approach.
Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC).
Wrap client components in Suspense with fallback.
Use dynamic loading for non-critical components.
Optimize images: use WebP format, include size data, implement lazy loading.
Use 'nuqs' for URL search parameter state management.
Limit 'use client': Favor server components and Next.js SSR. Use only for Web API access in small components. Avoid for data fetching or state management.
Files:
packages/react/src/utils/styled.tsxpackages/react/src/components/ActionButton/ActionButton.tsx
packages/react/**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/react.mdc)
packages/react/**/*.{ts,tsx}: Never use the 'any' type in TypeScript - use proper typing
Prefer arrow functions for component and function definitions
Files:
packages/react/src/utils/styled.tsxpackages/react/src/components/ActionButton/ActionButton.tsx
packages/react/src/components/*/*.tsx
📄 CodeRabbit Inference Engine (.cursor/rules/react.mdc)
packages/react/src/components/*/*.tsx: Every component directory must contain a main component file with the same name as the directory (e.g., Button.tsx)
Export individual subcomponents from the main component file
Always import React at the top of component files
Define proper TypeScript interfaces for component props
Prefer arrow function syntax for component definitions
Files:
packages/react/src/components/ActionButton/ActionButton.tsx
🪛 Biome (2.1.2)
packages/css/recipes/chip-tabs.css
[error] 62-62: Unexpected unknown pseudo-class selected
See MDN web docs for more details.
(lint/correctness/noUnknownPseudoClass)
[error] 69-69: Unexpected unknown pseudo-class selected
See MDN web docs for more details.
(lint/correctness/noUnknownPseudoClass)
[error] 76-76: Unexpected unknown pseudo-class selected
See MDN web docs for more details.
(lint/correctness/noUnknownPseudoClass)
[error] 88-88: Unexpected unknown pseudo-class selected
See MDN web docs for more details.
(lint/correctness/noUnknownPseudoClass)
[error] 96-96: Unexpected unknown pseudo-class selected
See MDN web docs for more details.
(lint/correctness/noUnknownPseudoClass)
[error] 104-104: Unexpected unknown pseudo-class selected
See MDN web docs for more details.
(lint/correctness/noUnknownPseudoClass)
packages/css/recipes/tabs.css
[error] 72-72: Unexpected unknown pseudo-class selected
See MDN web docs for more details.
(lint/correctness/noUnknownPseudoClass)
[error] 79-79: Unexpected unknown pseudo-class selected
See MDN web docs for more details.
(lint/correctness/noUnknownPseudoClass)
packages/css/base.min.css
[error] 1-1: Unexpected unknown function: constant
Use a known function instead.
See MDN web docs for more details.
(lint/correctness/noUnknownFunction)
[error] 1-1: Unexpected unknown function: constant
Use a known function instead.
See MDN web docs for more details.
(lint/correctness/noUnknownFunction)
[error] 1-1: Unexpected unknown function: constant
Use a known function instead.
See MDN web docs for more details.
(lint/correctness/noUnknownFunction)
[error] 1-1: Generic font family missing.
Consider adding a generic font family as a fallback.
For examples and more information, see the MDN Web Docs
(lint/a11y/useGenericFontNames)
[error] 1-1: Generic font family missing.
Consider adding a generic font family as a fallback.
For examples and more information, see the MDN Web Docs
(lint/a11y/useGenericFontNames)
packages/css/all.css
[error] 4088-4088: Unexpected unknown pseudo-class selected
See MDN web docs for more details.
(lint/correctness/noUnknownPseudoClass)
[error] 4264-4264: Unexpected unknown pseudo-class selected
See MDN web docs for more details.
(lint/correctness/noUnknownPseudoClass)
[error] 4273-4273: Unexpected unknown pseudo-class selected
See MDN web docs for more details.
(lint/correctness/noUnknownPseudoClass)
[error] 4282-4282: Unexpected unknown pseudo-class selected
See MDN web docs for more details.
(lint/correctness/noUnknownPseudoClass)
[error] 4297-4297: Unexpected unknown pseudo-class selected
See MDN web docs for more details.
(lint/correctness/noUnknownPseudoClass)
[error] 4307-4307: Unexpected unknown pseudo-class selected
See MDN web docs for more details.
(lint/correctness/noUnknownPseudoClass)
[error] 4317-4317: Unexpected unknown pseudo-class selected
See MDN web docs for more details.
(lint/correctness/noUnknownPseudoClass)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Analyze (javascript)
- GitHub Check: chromatic-deployment
- GitHub Check: Deploy Seed Design V3 Docs
🔇 Additional comments (67)
ecosystem/qvism/core/src/parser.ts (1)
32-38: 상수 정의가 명확하고 잘 구조화되어 있습니다.오버라이드 가능한 CSS 속성과 대응하는 CSS 변수의 매핑이 명확하게 정의되어 있습니다. 한국어 주석도 적절합니다.
packages/css/recipes/text.css (1)
4-4: 색상 오버라이드 패턴이 올바르게 적용되었습니다.
--seed-box-color를 우선순위로 하고 기존--seed-text-color를 폴백으로 사용하는 패턴이 정확하게 구현되어 있습니다.packages/css/recipes/action-chip.css (3)
18-19: 기본 스타일에 오버라이드 패턴이 올바르게 적용되었습니다.
background와color속성 모두--seed-box-*변수를 우선순위로 하고 기존 변수를 폴백으로 사용하는 패턴이 정확합니다.
27-27: 활성 상태 스타일도 일관되게 적용되었습니다.액티브 상태에서도 오버라이드 가능한 배경 패턴이 올바르게 적용되어 있습니다.
33-34: 비활성 상태에서 완전한 오버라이드 지원을 제공합니다.비활성 상태에서
background와color모두에 오버라이드 패턴이 적용되어 일관된 테마 지원을 제공합니다.packages/css/recipes/identity-placeholder.css (1)
10-10: 배경색 오버라이드 패턴이 정확하게 구현되었습니다.
--seed-box-background를 우선순위로 하고 기존 팔레트 색상을 폴백으로 사용하는 패턴이 올바르게 적용되어 있습니다.packages/css/recipes/link-content.css (1)
5-5: 배경색 오버라이드 패턴이 올바르게 적용되었습니다.
transparent에서var(--seed-box-background, transparent)로 변경하여 동적 배경색 지원을 제공하면서 기본값을 유지합니다.packages/css/recipes/skeleton.css (1)
34-42: 오버라이드 변수 도입 확인 완료
--seed-box-background변수를 우선 사용하도록 수정돼 테마 확장성이 향상되었습니다. 기존::after그라디언트와도 충돌이 없으므로 문제없습니다.packages/css/recipes/app-bar.css (1)
203-214: 오버라이드 변수 적용 확인
--seed-box-background/--seed-box-color적용으로 커스텀 테마가 용이해졌습니다. 다른 상태 (:hover / :active 등)에서도 동일 패턴이 유지되는지 한번 더 확인해 두시면 좋겠습니다.packages/css/recipes/action-sheet-item.css (3)
6-6: CSS 커스텀 프로퍼티 폴백 패턴이 올바르게 적용되었습니다.
--seed-box-background변수가 우선순위를 가지고, 정의되지 않은 경우 기존의--seed-color-bg-layer-floating변수로 폴백하는 구조가 적절합니다.
15-15: 액티브 상태에서도 일관된 폴백 패턴이 적용되었습니다.사용자 상호작용 상태에서도 오버라이드 가능한 스타일링이 제대로 구현되어 있습니다.
25-25: 색상 및 배경 속성에 대한 통일된 테마 오버라이드 메커니즘이 구현되었습니다.
after의사 요소와 tone별 색상 클래스에서도 일관된 CSS 커스텀 프로퍼티 폴백 패턴이 적용되어 테마 커스터마이징이 용이해졌습니다.Also applies to: 28-28, 31-31
packages/css/recipes/toggle-button.css (2)
29-30: brandSolid 변형에서 모든 상태에 대해 일관된 오버라이드 메커니즘이 구현되었습니다.기본, 액티브, 프레스, 비활성화, 로딩 상태 모두에서
--seed-box-background와--seed-box-color폴백 패턴이 체계적으로 적용되어 있어 완전한 테마 커스터마이징이 가능합니다.Also applies to: 35-35, 38-39, 46-46, 49-50, 55-55, 58-58
65-66: neutralWeak 변형에서도 동일한 품질의 오버라이드 구현이 적용되었습니다.모든 상호작용 상태에서 일관된 CSS 커스텀 프로퍼티 사용으로 사용자가 토글 버튼의 모든 시각적 상태를 커스터마이징할 수 있습니다.
Also applies to: 71-71, 74-75, 82-82, 85-86, 91-91, 94-94
packages/react/src/utils/styled.tsx (1)
492-503: 오버라이드 가능한 스타일 프로퍼티를 위한 적절한 타입 정의가 추가되었습니다.
OverridableStyleProps타입이 색상, 배경, 그라디언트 관련 프로퍼티들을 올바르게 선택하여 CSS 커스텀 프로퍼티 오버라이드 기능에 대한 타입 안정성을 제공합니다.Pick유틸리티 타입 사용도 적절합니다.packages/css/recipes/contextual-floating-button.css (2)
44-45: solid 변형에서 완전한 오버라이드 메커니즘이 구현되었습니다.기본, 액티브, 비활성화, 로딩 상태 모두에서
--seed-box-background와--seed-box-color폴백 패턴이 일관되게 적용되어 있습니다.Also applies to: 52-52, 55-56, 61-61
64-65: layer 변형에서도 동일한 품질의 구현이 적용되었습니다.모든 상호작용 상태에서 CSS 커스텀 프로퍼티 폴백이 체계적으로 적용되어 일관된 테마 오버라이드 경험을 제공합니다.
Also applies to: 72-72, 75-76, 81-81
packages/css/recipes/manner-temp.css (1)
13-13: 모든 매너 온도 레벨에서 색상 오버라이드 기능이 체계적으로 구현되었습니다.레벨별 고유 색상(
--seed-color-manner-temp-l1-text~--seed-color-manner-temp-l6-text)을 유지하면서도--seed-box-color를 통한 통합적인 테마 커스터마이징이 가능하도록 올바르게 구현되었습니다.Also applies to: 16-16, 19-19, 22-22, 25-25, 28-28
packages/css/recipes/extended-action-sheet-item.css (4)
5-5: 백그라운드 오버라이드 변수 도입 확인 완료
--seed-box-background변수를 우선 사용하도록 변경된 부분 문제 없습니다.
16-17: active 상태도 동일한 패턴 적용 확인
일관성 있게 fallback 패턴이 유지되어 있습니다.
25-26: 텍스트 컬러 오버라이드 시 접근성 대비 확인 필요
커스텀 테마에서--seed-box-color값을 넣을 경우 대비 / 명암비가 충분한지 QA 단계에서 한번 더 확인해주세요.
29-30: critical 톤 역시 동일 적용
변경 내용 이상 없습니다.packages/css/recipes/dialog.css (3)
14-15:background사용으로 의도치 않은 이미지/그라디언트 초기화 가능성
기존에도background속성이었다면 문제 없으나, 만약 추후 다중 레이어 백그라운드를 쓸 가능성이 있다면background-color로 한정하는 것이 안전합니다.
44-45: 컨텐츠 패널 배경 변수 적용 확인
일관성 있게 오버라이드 변수를 사용하고 있어 OK 입니다.
76-84: 타이틀/디스크립션 색상 접근성 검증 권장
다크 테마 등에서--seed-box-color가 밝게 설정될 경우 대비가 부족할 수 있습니다. QA 체크 부탁드립니다.packages/css/recipes/snackbar.css (5)
7-8: 스낵바 루트 배경 변수 적용 확인
문제 없습니다.
34-35: 메시지 색상 변수 적용 확인
OK.
59-60: 액션 버튼 텍스트 컬러 오버라이드 확인
문제 없습니다.
72-73: 가상 요소 배경 투명 처리 확인
transparentfallback 으로 명확하게 처리되어 있습니다.
78-82: variant 색상 변수 적용 검토 완료
positive/critical 변형 모두 일관성 있게 적용되었습니다.packages/css/recipes/chip.css (4)
35-36: 레이블 기본 컬러 오버라이드 허용 확인
inherit → 변수 fallback 전환 OK.
57-75: solid 변형 전체에 변수 적용 완료
배경·텍스트·아이콘 컬러가 모두 동일 패턴으로 묶여 있어 유지보수 용이해졌습니다.
83-101: outlineStrong 변형도 동일 패턴 적용
추가 이슈 없습니다.
108-130: outlineWeak 변형 변수 적용
렉시컬 변수 적용으로 테마 확장성 확보된 점 확인했습니다.packages/css/recipes/app-screen.css (2)
32-34: 배경색 오버라이드 패턴 적용 👍
var(--seed-box-background, …)패턴으로 레이어 배경을 외부에서 제어할 수 있게 된 점이 깔끔합니다. 별다른 부작용도 없어 보입니다.
46-49:backgroundvsbackground-color혼용 확인 필요동일한 컴포넌트에서
.seed-app-screen__layer→background-color.seed-app-screen__dim--theme_cupertino/...fadeFromBottomAndroid→background두 프로퍼티가 섞여 있습니다.
--seed-box-background에 단색 값이 들어오면 gradient / 이미지 정의가 통째로 덮여서 시각 효과가 사라질 수 있으니 의도한 동작인지 한번 더 확인 부탁드립니다.Also applies to: 178-180
packages/css/recipes/action-sheet.css (1)
85-86: 텍스트 대비(contrast) 재검토 권장
--seed-box-color로 임의 색상을 주입하면 기존 muted 톤·폰트 가중치와 조합되어 WCAG 대비가 깨질 가능성이 있습니다. 디자인 시스템 가이드에 맞는 대비가 유지되는지 확인해 주세요.Also applies to: 88-96
packages/css/recipes/app-bar-main.css (1)
125-142: 주 테마 색상 오버라이드 적용 확인헤더 계열에
--seed-box-color가 적용되어 다크/라이트 테마 처리 가독성이 향상됩니다. 다른 파생 파일(app-bar.css등)에서도 동일 패턴이 적용됐는지 한 번에 grep 해보시면 누락 여부를 빠르게 점검할 수 있습니다.packages/css/recipes/help-bubble.css (1)
4-5: 컨텐츠 배경 오버라이드 OK
--seed-box-background적용으로 말풍선 색상을 쉽게 재정의할 수 있게 된 점 좋습니다.packages/css/recipes/control-chip.css (1)
17-24: 기본 폰트 컬러 오버라이드 👍기본 상태에서
--seed-box-color로 글자색 제어 가능해졌습니다. 문제없어 보입니다.packages/css/recipes/fab.css (1)
21-21: CSS 커스텀 프로퍼티 폴백 패턴 도입 👍
--seed-box-background변수를 우선 사용하고, 미정의 시 기존 색상을 폴백으로 사용하도록 수정된 점이 일관성‧유연성 측면에서 좋습니다. 다른 레시피들도 동일 패턴으로 맞춰주셨는지 한 번 더 점검해 주세요.Also applies to: 30-30
packages/css/recipes/reaction-button.css (1)
23-26: 배경/글자색 오버라이드 대응 완료 👍버튼·토글·비활성·로딩 등 모든 상태별로
--seed-box-background/--seed-box-color를 적용해 주셔서 테마 오버라이드가 한층 수월해졌습니다. 다만--track-color,--range-color등 내부 토큰도 함께 오버라이드 해야 하는 컴포넌트라면 후속 PR에서 검토해 주세요.Also applies to: 32-37, 42-47, 53-57
packages/css/recipes/bottom-sheet.css (1)
14-15: 시트·백드롭·타이틀 등 전체 요소에 일관 적용 👍시트와 백드롭의 배경, 타이틀/디스크립션 색상까지 빠짐없이 오버라이드 변수를 도입한 점 확인했습니다. 접근성(명암비) 측면에서 커스텀 테마가 들어올 때 대비해 QA 단계에서 한 번 더 확인만 부탁드립니다.
Also applies to: 44-45, 75-83, 120-121
packages/css/recipes/inline-banner.css (1)
46-47: 인라인 배너 전 Variant에 오버라이드 적용 완료 👍 / 접근성 주의모든 variant(Neutral/Positive/Informative/Warning/Critical)의 배경·글자·링크·버튼에 오버라이드 변수를 넣어주신 점 확인했습니다.
단, 배경을 투명도로 조합해 쓰는 경우(transparent) 커스텀 테마가 어두운 계열일 때 부족한 대비가 발생할 수 있으므로 QA 단계에서 실제 색상 조합으로 시야성(contrast)을 확인해 주세요.Also applies to: 71-72, 76-178
packages/css/recipes/floating-action-button.css (2)
23-34: 테마 오버라이드 변수 적용 👍
--seed-box-background,--seed-box-color변수를 기본값으로 두고 기존 토큰을 폴백으로 둔 구조가 일관성 있게 적용되었습니다. 런타임에서 변수만 주입하면 손쉽게 색상을 덮어쓸 수 있어 확장성이 좋습니다.
40-41:color속성에도 동일한 패턴 잘 적용됨아이콘 색상까지 동일한 오버라이드 경로를 사용해 일관성을 유지했습니다. 추가 의견 없습니다.
packages/css/recipes/badge.css (1)
42-45: 첫 배지 변형에 새 변수 패턴 정상 적용
background-color·color모두 새 커스텀 프로퍼티 → 기존 토큰 순으로 지정되었습니다. 퍼포먼스나 동작상의 문제는 없어 보입니다. 이후 변형들도 동일 패턴이 반복되므로 별도 코멘트는 생략합니다.packages/css/recipes/extended-fab.css (2)
28-33: 배경·전경색 오버라이드 패턴 적용 확인문법적 오류 없으며, 토큰 순서도 올바릅니다.
38-43: layerFloating 변형도 동일 패턴 정상 적용packages/css/recipes/extended-action-sheet.css (4)
14-15: Backdrop 배경 오버라이드 패턴 확인
44-45: Content 배경에도 동일 패턴 적용
77-78: 제목 색상 오버라이드 가능 확인
105-117: CloseButton 색상·pressed 상태 모두 커버👍
background-color와:active프레스드 색상까지 오버라이드 변수를 사용해 일관성을 지켰습니다.packages/css/recipes/action-button.css (1)
140-142: border-color도 상태별 일관성 확인 필요기본·disabled 상태에서는
--seed-box-border-color를 사용하지만:active상태(149~150라인)에는 여전히 고정 토큰입니다. 경계선 색상까지 완전한 오버라이드를 원한다면 동일 변수로 교체를 검토해 주세요.packages/css/recipes/radio.css (1)
8-11: 오버라이드 변수 도입 👍
--seed-box-background/--seed-box-border-color도입으로 테마 확장성이 높아졌습니다. 별다른 이슈 없습니다.packages/css/recipes/tabs.css (1)
60-78::selected가상 클래스 사용 확인 필요Biome가
:selected를 알 수 없는 가상 클래스로 보고 있습니다.
CSS 표준에는 없으므로 런타임(예: Stitches, Radix)이나 PostCSS에서 처리되는지 확인 바랍니다.packages/css/recipes/segmented-control.css (2)
9-25: 오버라이드 변수 적용 OK루트·인디케이터에
--seed-box-background적용이 잘 반영되었습니다. 추가 피드백 없습니다.
44-56: 프레스드 상태 색상 누락 가능성 검토
.seed-segmented-control__item:not(:is(:checked, [data-checked])):is(:active, [data-active])에만 배경 오버라이드가 있고 색상(color) 오버라이드는 없습니다. 의도된 디자인인지 한번 더 확인해 주세요.packages/css/recipes/select-box.css (1)
92-94: 아이콘 배경/전경 오버라이드 변수 혼합 사용 주의
background-color는--seed-box-background,color는--seed-box-color를 사용합니다.
두 변수에 서로 다른 값이 들어올 경우 의도치 않게 배경과 전경이 어긋날 수 있으니 디자인 시스템 차원에서 값 동기화 여부를 확인해 주세요.packages/css/recipes/text-field.css (1)
21-25: 포커스 상태 border-color 오버라이드 👍포커스 시에도
--seed-box-border-color가 적용되어 일관성이 확보되었습니다. 별다른 문제 없습니다.packages/css/base.min.css (1)
1-1: CSS 변수 폴백 시스템이 올바르게 구현되었습니다새로운
--seed-box-*변수들을 통한 계층적 폴백 시스템이 일관되게 적용되었습니다. 아이콘, 텍스트, 배경색에 대해 오버라이드 가능한 테마 시스템을 제공하면서 기존 변수들을 폴백으로 유지하고 있습니다.정적 분석 도구의 경고는 거짓 양성입니다:
constant()함수는 safe-area-inset을 위한 유효한 CSS 함수입니다-apple-system-body폰트는 iOS용으로 의도적으로 사용된 것입니다packages/css/recipes/callout.css (2)
43-43: 투명 배경에 대한 일관된 오버라이드 지원링크와 닫기 버튼에
transparent배경색에 대한 오버라이드 지원이 추가되었습니다. 이를 통해 필요시 커스텀 배경색을 적용할 수 있습니다.Also applies to: 55-55
68-151: 모든 톤 변형에 대한 체계적인 테마 오버라이드 구현neutral, informative, warning, critical, magic 모든 톤 변형에 대해 일관된 CSS 변수 폴백 패턴이 적용되었습니다. 각 톤의 배경색, 텍스트 색상, 링크 색상이
--seed-box-*변수로 오버라이드 가능하면서 기존 디자인 토큰을 폴백으로 유지합니다.magic 톤의 경우 그라디언트를 사용하므로 배경 오버라이드가 적용되지 않은 것이 올바릅니다.
packages/css/recipes/checkbox.css (2)
32-32: 체크박스 square 변형의 포괄적인 테마 오버라이드 지원라벨 색상, 테두리 색상, 배경색이 모든 상태(기본, 체크됨, 활성, 비활성)에 대해
--seed-box-*변수로 오버라이드 가능하도록 업데이트되었습니다. 기존 디자인 토큰은 폴백으로 유지되어 하위 호환성을 보장합니다.Also applies to: 43-43, 46-47, 50-51, 53-54, 56-58, 60-61
64-65: 체크박스 아이콘 및 ghost 변형의 일관된 테마 지원square와 ghost 변형 모두의 아이콘 색상과 배경이 새로운 CSS 변수 시스템을 통해 오버라이드 가능합니다. ghost 변형의 경우 적절히
none배경을 사용하면서도 테마 오버라이드를 지원합니다.모든 상태(체크됨, 비활성화됨, 활성)에 대한 포괄적인 커버리지를 제공합니다.
Also applies to: 68-69, 71-72, 74-90, 92-106
packages/react/src/components/ActionButton/ActionButton.tsx (2)
8-8: 새로운 테마 시스템 지원을 위한 타입 인터페이스 업데이트
OverridableStyleProps를 확장하여 새로운 CSS 변수 기반 테마 시스템을 지원합니다. 이는 컴포넌트 레벨의 색상 prop 대신 CSS 커스텀 프로퍼티를 통한 테마 오버라이드 방식으로의 전환을 나타냅니다.코딩 가이드라인을 준수합니다:
- 타입 대신 인터페이스 사용
- 적절한 TypeScript 타이핑
- 'any' 타입 사용 안 함
Also applies to: 21-22
26-26: 인라인 스타일링에서 CSS 변수 기반 테마로 전환
colorprop과 관련된 동적 스타일링 로직이 제거되고,useStyleProps를 통한 CSS 변수 기반 스타일링으로 전환되었습니다. 이는 관심사를 분리하고 일관된 테마 시스템을 제공하는 더 깔끔한 접근 방식입니다.Also applies to: 45-45
| if (name in OVERRIDABLE_PROPERTIES) { | ||
| const cssVar = OVERRIDABLE_PROPERTIES[name]; | ||
| // 이미 해당 CSS 변수로 래핑되어 있지 않은 경우만 처리 | ||
| if (!valueStr.startsWith(`var(${cssVar},`)) { | ||
| valueStr = `var(${cssVar}, ${valueStr})`; | ||
| } | ||
| } |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
var() 래핑 로직 검증이 필요합니다.
현재 구현에서 valueStr.startsWith(\var(${cssVar},`)`로 중복 래핑을 방지하고 있지만, 다른 형태의 var() 표현식이나 공백이 포함된 경우를 고려해야 합니다.
다음 스크립트로 다양한 var() 표현식 패턴을 확인해보겠습니다:
🏁 Script executed:
#!/bin/bash
# var() 사용 패턴 확인을 위한 CSS 파일들 검색
rg -A 2 -B 2 "var\(--seed-box-(color|background|border-color)" --type cssLength of output: 275193
var() 래핑 로직 정교화 필요
현재 valueStr.startsWith(\var(${cssVar},`)` 검사로는 아래 같은 경우를 놓칠 수 있습니다.
- Fallback 없이
var(--cssVar)형태로만 사용된 경우 - 괄호 안·앞뒤 공백이 있는 경우 (
var( --cssVar , … )등)
정규식 기반 검사로 아래와 같이 보완하세요:
// ecosystem/qvism/core/src/parser.ts (77–83)
if (name in OVERRIDABLE_PROPERTIES) {
const cssVar = OVERRIDABLE_PROPERTIES[name];
// var(--cssVar, …) 또는 var(--cssVar) 모두 건너뛰도록
const varRegex = new RegExp(`^var\\(\\s*${cssVar}\\s*(?:,|\\))`);
if (!varRegex.test(valueStr)) {
valueStr = `var(${cssVar}, ${valueStr})`;
}
}- RegExp 에서
(?:,|\))를 사용해 콤마가 있거나(var(--cssVar, …)), 없거나(var(--cssVar)) 모두 감지 \\s*로 공백 포함 형태까지 커버
위와 같이 수정 후 다양한 var() 패턴에서도 중복 래핑이 발생하지 않는지 재검증해 주세요.
🤖 Prompt for AI Agents
In ecosystem/qvism/core/src/parser.ts around lines 77 to 83, the current check
using valueStr.startsWith for detecting if valueStr is already wrapped with
var(cssVar) misses cases without fallback and with spaces. Replace this check
with a regular expression that matches var(cssVar) with optional spaces and
either a comma or closing parenthesis, ensuring both var(--cssVar) and
var(--cssVar, ...) forms are detected. Use a RegExp like
^var\(\s*cssVar\s*(?:,|\)) to test valueStr and only wrap with var(cssVar,
valueStr) if the regex does not match. After updating, verify no duplicate
wrapping occurs for various var() patterns.
| .seed-tabs__trigger:is(:selected, [data-selected]) { | ||
| color: var(--seed-color-fg-neutral); | ||
| color: var(--seed-box-color, var(--seed-color-fg-neutral)); | ||
| } | ||
|
|
||
| .seed-tabs__trigger:is(:disabled, [disabled], [data-disabled]) { | ||
| cursor: not-allowed; |
There was a problem hiding this comment.
표준이 아닌 :selected 가상 클래스 사용으로 규칙 무효화
:selected 는 <option> 요소에만 적용되는 표준 가상 클래스입니다. 일반 버튼·div 등에 사용될 경우 브라우저가 해당 선택자를 무시하므로 스타일이 적용되지 않습니다.
-.seed-tabs__trigger:is(:selected, [data-selected]) {
+.seed-tabs__trigger:is([aria-selected="true"], [data-selected]) {동일 패턴이 여러 군데(4260, 4270, 4280 라인 등) 반복되니 일괄 교체해 주세요.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| .seed-tabs__trigger:is(:selected, [data-selected]) { | |
| color: var(--seed-color-fg-neutral); | |
| color: var(--seed-box-color, var(--seed-color-fg-neutral)); | |
| } | |
| .seed-tabs__trigger:is(:disabled, [disabled], [data-disabled]) { | |
| cursor: not-allowed; | |
| .seed-tabs__trigger:is([aria-selected="true"], [data-selected]) { | |
| color: var(--seed-box-color, var(--seed-color-fg-neutral)); | |
| } | |
| .seed-tabs__trigger:is(:disabled, [disabled], [data-disabled]) { | |
| cursor: not-allowed; |
🧰 Tools
🪛 Biome (2.1.2)
[error] 4079-4079: Unexpected unknown pseudo-class selected
See MDN web docs for more details.
(lint/correctness/noUnknownPseudoClass)
🤖 Prompt for AI Agents
In packages/css/all.css around lines 4079 to 4084, the use of the non-standard
:selected pseudo-class should be replaced because it only applies to <option>
elements and is ignored on buttons or divs, causing styles not to apply. Replace
all occurrences of :selected with a valid selector such as
[aria-selected="true"] or a similar attribute selector that correctly reflects
the selected state. Apply this fix consistently to all similar patterns found
around lines 4260, 4270, 4280, and elsewhere.
| .seed-box { | ||
| --seed-box-background: initial; | ||
| --seed-box-color: initial; | ||
| background: var(--seed-box-background); | ||
| color: var(--seed-box-color); | ||
| background: var(--seed-box-background, var(--seed-box-background)); | ||
| color: var(--seed-box-color, var(--seed-box-color)); | ||
| --seed-box-border-style: solid; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
순환 참조(fallback loop)로 인해 CSS 속성이 무효화될 위험이 있습니다
var(--seed-box-background, var(--seed-box-background)) 형태로 동일 변수를 중첩 사용하면, 변수 미정의 시 폴백도 동일 미정의 상태가 되어 브라우저가 값을 무효화(ignored)합니다. color, border-color 역시 동일 문제입니다.
- background: var(--seed-box-background, var(--seed-box-background));
- color: var(--seed-box-color, var(--seed-box-color));
+ /* 변수가 없을 때 기본값을 지정해 순환 참조를 방지합니다. */
+ background: var(--seed-box-background, initial);
+ color: var(--seed-box-color, currentColor);
...
- border-color: var(--seed-box-border-color, var(--seed-box-border-color));
+ border-color: var(--seed-box-border-color, initial);이대로 릴리스되면 .seed-box가 테마 변수 없이 사용될 때 배경·글자색·테두리가 모두 사라질 수 있습니다. 수정 권장합니다.
Also applies to: 82-83
🤖 Prompt for AI Agents
In packages/css/base.css around lines 74 to 79 and also lines 82 to 83, the CSS
custom properties use fallback values that reference themselves, causing a
circular fallback loop which invalidates the properties. To fix this, replace
fallback values like var(--seed-box-background, var(--seed-box-background)) with
a valid default value or remove the fallback to avoid self-referencing. Apply
the same correction to color and border-color properties to ensure they have
proper fallback values and do not get ignored by the browser.
| background: var(--seed-box-background, var(--seed-color-bg-brand-solid)); | ||
| color: var(--seed-box-color, var(--seed-color-palette-static-white)); | ||
| --seed-prefix-icon-color: var(--seed-color-palette-static-white); | ||
| --seed-suffix-icon-color: var(--seed-color-palette-static-white); | ||
| --seed-icon-color: var(--seed-color-palette-static-white); | ||
| --track-color: var(--seed-color-palette-static-white-alpha-300); | ||
| --range-color: var(--seed-color-palette-static-white); | ||
| } | ||
| .seed-action-button--variant_brandSolid:is(:active, [data-active]) { |
There was a problem hiding this comment.
🛠️ Refactor suggestion
아이콘 색상까지 오버라이드 가능하도록 수정 제안
버튼 본문은 --seed-box-color를 쓰지만 아이콘은 고정 토큰이라 덮어쓰기 시 색상이 불일치합니다. 아래처럼 보조 변수도 동일 경로를 사용하면 해결됩니다.
- --seed-prefix-icon-color: var(--seed-color-palette-static-white);
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
- --seed-icon-color: var(--seed-color-palette-static-white);
+ --seed-prefix-icon-color: var(--seed-box-color, var(--seed-color-palette-static-white));
+ --seed-suffix-icon-color: var(--seed-box-color, var(--seed-color-palette-static-white));
+ --seed-icon-color: var(--seed-box-color, var(--seed-color-palette-static-white));📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| background: var(--seed-box-background, var(--seed-color-bg-brand-solid)); | |
| color: var(--seed-box-color, var(--seed-color-palette-static-white)); | |
| --seed-prefix-icon-color: var(--seed-color-palette-static-white); | |
| --seed-suffix-icon-color: var(--seed-color-palette-static-white); | |
| --seed-icon-color: var(--seed-color-palette-static-white); | |
| --track-color: var(--seed-color-palette-static-white-alpha-300); | |
| --range-color: var(--seed-color-palette-static-white); | |
| } | |
| .seed-action-button--variant_brandSolid:is(:active, [data-active]) { | |
| background: var(--seed-box-background, var(--seed-color-bg-brand-solid)); | |
| color: var(--seed-box-color, var(--seed-color-palette-static-white)); | |
| --seed-prefix-icon-color: var(--seed-box-color, var(--seed-color-palette-static-white)); | |
| --seed-suffix-icon-color: var(--seed-box-color, var(--seed-color-palette-static-white)); | |
| --seed-icon-color: var(--seed-box-color, var(--seed-color-palette-static-white)); | |
| --track-color: var(--seed-color-palette-static-white-alpha-300); | |
| --range-color: var(--seed-color-palette-static-white); | |
| } | |
| .seed-action-button--variant_brandSolid:is(:active, [data-active]) { |
🤖 Prompt for AI Agents
In packages/css/recipes/action-button.css around lines 49 to 57, the icon colors
are currently fixed tokens and do not follow the button text color variable,
causing color inconsistencies when overriding. To fix this, update the icon
color CSS variables (--seed-prefix-icon-color, --seed-suffix-icon-color,
--seed-icon-color) to use the same variable path as --seed-box-color, allowing
consistent color overrides for both button text and icons.
| background-color: var(--seed-box-background, transparent); | ||
| color: var(--seed-box-color, var(--seed-color-fg-neutral)); | ||
| font-weight: var(--seed-font-weight-bold); | ||
| } | ||
| .seed-chip-tabs__trigger--variant_neutralSolid:is(:selected, [data-selected]) { | ||
| background-color: var(--seed-color-bg-neutral-inverted); | ||
| color: var(--seed-color-fg-neutral-inverted); | ||
| background-color: var(--seed-box-background, var(--seed-color-bg-neutral-inverted)); | ||
| color: var(--seed-box-color, var(--seed-color-fg-neutral-inverted)); | ||
| } | ||
| .seed-chip-tabs__trigger--variant_neutralSolid:is(:active, [data-active]) { | ||
| background-color: var(--seed-color-bg-layer-default-pressed); | ||
| background-color: var(--seed-box-background, var(--seed-color-bg-layer-default-pressed)); | ||
| } | ||
| .seed-chip-tabs__trigger--variant_neutralSolid:is(:selected, [data-selected]):is(:active, [data-active]) { | ||
| background-color: var(--seed-color-bg-neutral-inverted-pressed); | ||
| background-color: var(--seed-box-background, var(--seed-color-bg-neutral-inverted-pressed)); | ||
| } | ||
| .seed-chip-tabs__trigger--variant_neutralSolid:is(:disabled, [disabled], [data-disabled]) { | ||
| cursor: not-allowed; | ||
| color: var(--seed-color-fg-disabled); | ||
| color: var(--seed-box-color, var(--seed-color-fg-disabled)); | ||
| } | ||
| .seed-chip-tabs__trigger--variant_neutralSolid:is(:disabled, [disabled], [data-disabled]):is(:selected, [data-selected]) { | ||
| background-color: var(--seed-color-bg-disabled); | ||
| color: var(--seed-color-fg-disabled); | ||
| background-color: var(--seed-box-background, var(--seed-color-bg-disabled)); | ||
| color: var(--seed-box-color, var(--seed-color-fg-disabled)); | ||
| } |
There was a problem hiding this comment.
:selected 사용으로 전체 선택자 무효화 위험
:selected 는 <option> 요소 전용 표준 pseudo-class입니다.
is() 안에 유효하지 않은 선택자가 포함되면 전체 선택자가 무효 처리되어 스타일이 적용되지 않을 수 있습니다. 이미 [data-selected] 속성을 병행 사용하므로 :selected 는 제거해도 동작에 영향이 없습니다.
-:is(:selected, [data-selected])
+:is([data-selected])동일 패턴이 반복되는 모든 변형 셀렉터에서 동일하게 수정해 주세요.
Also applies to: 88-98, 100-106
🧰 Tools
🪛 Biome (2.1.2)
[error] 62-62: Unexpected unknown pseudo-class selected
See MDN web docs for more details.
(lint/correctness/noUnknownPseudoClass)
[error] 69-69: Unexpected unknown pseudo-class selected
See MDN web docs for more details.
(lint/correctness/noUnknownPseudoClass)
[error] 76-76: Unexpected unknown pseudo-class selected
See MDN web docs for more details.
(lint/correctness/noUnknownPseudoClass)
🤖 Prompt for AI Agents
In packages/css/recipes/chip-tabs.css around lines 58 to 79, replace all
occurrences of the invalid :selected pseudo-class inside the :is() selectors
with only the valid attribute selectors like [data-selected]. Remove :selected
from all variant selectors in this range and also apply the same fix to the
similar selectors in lines 88-98 and 100-106 to prevent the entire selector from
being invalidated and ensure styles are applied correctly.
| background: var(--seed-box-background, var(--seed-color-bg-layer-default-pressed)); | ||
| } | ||
| .seed-control-chip:is(:checked, [data-checked]) { | ||
| box-shadow: none; | ||
| background: var(--seed-color-bg-neutral-solid-muted); | ||
| color: var(--seed-color-palette-static-white); | ||
| background: var(--seed-box-background, var(--seed-color-bg-neutral-solid-muted)); | ||
| color: var(--seed-box-color, var(--seed-color-palette-static-white)); | ||
| font-weight: var(--seed-font-weight-bold); | ||
| --seed-prefix-icon-color: var(--seed-color-palette-static-white); | ||
| --seed-suffix-icon-color: var(--seed-color-palette-static-white); | ||
| --seed-icon-color: var(--seed-color-palette-static-white); | ||
| --seed-count-color: var(--seed-color-palette-static-white-alpha-800); | ||
| } | ||
| .seed-control-chip:is(:checked, [data-checked]):is(:active, [data-active]) { | ||
| background: var(--seed-color-bg-neutral-solid-muted-pressed); | ||
| background: var(--seed-box-background, var(--seed-color-bg-neutral-solid-muted-pressed)); | ||
| } | ||
| .seed-control-chip:is(:disabled, [disabled], [data-disabled]) { | ||
| cursor: not-allowed; | ||
| background: var(--seed-color-bg-disabled); | ||
| color: var(--seed-color-fg-disabled); | ||
| background: var(--seed-box-background, var(--seed-color-bg-disabled)); | ||
| color: var(--seed-box-color, var(--seed-color-fg-disabled)); | ||
| --seed-prefix-icon-color: var(--seed-color-fg-disabled); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
상태별 배경/글자색 오버라이드 충돌 가능성 점검
checked·disabled 상태에서도 --seed-box-background / --seed-box-color 를 그대로 사용하면 토글 시나리오에 따라 가독성이 떨어질 수 있습니다.
예)
:checked {
background: var(--seed-box-background, muted);
color: var(--seed-box-color, white);
}
사용자가 두 변수에 상반되는 색을 넣으면 의도와 달라질 수 있으니,
- 상태별로 별도 CSS 변수(
--seed-box-background-checked등) 도입, - 또는 상태가 우선하도록
var(--seed-box-background, var(--seed-color-bg-neutral-solid-muted))패턴 유지
를 고려해 보시면 어떨까요?
🤖 Prompt for AI Agents
In packages/css/recipes/control-chip.css around lines 29 to 48, the use of
generic CSS variables --seed-box-background and --seed-box-color in checked and
disabled states can cause readability issues if users assign conflicting colors.
To fix this, introduce separate CSS variables for each state, such as
--seed-box-background-checked and --seed-box-color-checked, and use these in the
respective selectors to ensure consistent and clear styling regardless of user
overrides.
| .seed-extended-fab--variant_neutralSolid { | ||
| --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted); | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
아이콘 색상 변수 누락
버튼 색상은 --seed-box-color로 덮어쓸 수 있게 됐지만, 아이콘은 여전히 고정 토큰을 사용합니다. 사용자 정의 색상을 아이콘까지 적용하려면 다음과 같이 수정이 필요합니다.
- --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted);
+ --seed-prefix-icon-color: var(--seed-box-color, var(--seed-color-fg-neutral-inverted));🤖 Prompt for AI Agents
In packages/css/recipes/extended-fab.css around lines 34 to 36, the icon color
variable is hardcoded and does not reflect user customizations. Update the
.seed-extended-fab--variant_neutralSolid class to use the --seed-box-color
variable for the icon color instead of the fixed token, ensuring that custom
button colors also apply to the icon.
| @@ -12,7 +12,7 @@ | |||
| text-align: center; | |||
| padding-inline: 0; | |||
| padding-block: 0; | |||
| color: var(--seed-box-color); | |||
| color: var(--seed-box-color, var(--seed-box-color)); | |||
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
중복된 CSS 변수 사용을 확인해주세요.
var(--seed-box-color, var(--seed-box-color))에서 동일한 변수가 기본값과 폴백값으로 사용되고 있습니다. 원래 의도된 폴백값이 있는지 확인이 필요합니다.
다음 스크립트로 link-content 관련 원본 색상 변수를 확인해보겠습니다:
🏁 Script executed:
#!/bin/bash
# link-content의 원본 색상 설정 확인
rg -A 5 -B 5 "seed-link-content.*color" --type cssLength of output: 174989
🏁 Script executed:
#!/bin/bash
# Find and inspect the link-content recipe file
RECIPE=$(fd link-content\.css)
echo "Found recipe at: $RECIPE"
sed -n '1,30p' "$RECIPE"Length of output: 1158
link-content.css에서 중복된 CSS 변수 제거 필요
.seed-link-content의 color 선언에서 기본값과 폴백값으로 동일한 --seed-box-color를 사용하고 있어 중복입니다.
의도된 폴백값이 없다면 아래처럼 간소화하거나, 진짜 fallback이 필요하다면 currentColor 등으로 수정해주세요.
- 파일:
packages/css/recipes/link-content.css - 라인: 15
- color: var(--seed-box-color, var(--seed-box-color));
+ /* 중복 제거 */
+ color: var(--seed-box-color);
/* 또는 */
+ /* 의도된 폴백(currentColor) 사용 시 */
+ color: var(--seed-box-color, currentColor);Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In packages/css/recipes/link-content.css at line 15, the color property uses the
same CSS variable --seed-box-color as both the main value and fallback, which is
redundant. Simplify the declaration by removing the duplicate fallback or
replace the fallback with a meaningful value like currentColor if a fallback is
intended.
| background-color: var(--seed-box-background, var(--seed-color-bg-brand-solid)); | ||
| color: var(--seed-box-color, var(--seed-color-palette-static-white)) | ||
| } |
There was a problem hiding this comment.
세미콜론 누락으로 CSS 파싱 오류 발생
마지막 선언에 세미콜론이 빠져 있어 규칙 블록이 정상적으로 끝나지 않습니다. 일부 브라우저-엔진에서 이후 규칙이 무시될 수 있습니다.
- color: var(--seed-box-color, var(--seed-color-palette-static-white))
+ color: var(--seed-box-color, var(--seed-color-palette-static-white));📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| background-color: var(--seed-box-background, var(--seed-color-bg-brand-solid)); | |
| color: var(--seed-box-color, var(--seed-color-palette-static-white)) | |
| } | |
| background-color: var(--seed-box-background, var(--seed-color-bg-brand-solid)); | |
| color: var(--seed-box-color, var(--seed-color-palette-static-white)); | |
| } |
🤖 Prompt for AI Agents
In packages/css/recipes/notification-badge.css at lines 11 to 13, the last CSS
declaration is missing a semicolon, causing parsing errors and potential
ignoring of subsequent rules in some browsers. Add a semicolon at the end of the
color property declaration to properly terminate the rule block.
| border-radius: var(--seed-radius-full); | ||
| background: var(--seed-color-palette-gray-600); | ||
| background: var(--seed-box-background, var(--seed-color-palette-gray-600)); | ||
| transition: background-color 50ms cubic-bezier(0.35, 0, 0.35, 1) 20ms; | ||
| } | ||
| .seed-switch__control:is(:checked, [data-checked]) { | ||
| background: var(--seed-color-bg-brand-solid); | ||
| background: var(--seed-box-background, var(--seed-color-bg-brand-solid)); | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
transition 대상 속성과 불일치
background 속성을 사용하면서 transition: background-color … 로 선언돼 애니메이션이 실행되지 않습니다.
- background: var(--seed-box-background, var(--seed-color-palette-gray-600));
+ background-color: var(--seed-box-background, var(--seed-color-palette-gray-600));아울러 :checked 상태(25-26행)도 동일하게 background-color 로 교체해 주세요.
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In packages/css/recipes/switch.css lines 20 to 26, the transition property
targets background-color but the background property is used for color changes,
causing the animation not to run. Change the transition property to target
background instead of background-color on line 22, and also update the selector
styles on lines 25-26 to use background-color consistently for the checked
state.
Summary by CodeRabbit
New Features
--seed-box-color,--seed-box-background,--seed-box-border-color)를 도입하여 다양한 컴포넌트의 색상/배경을 손쉽게 오버라이드할 수 있도록 개선되었습니다.Refactor
OverridableStyleProps)를 확장하도록 변경되었습니다.Style