로고SEED Design

Changelog

최신 업데이트와 변경사항을 기록합니다.

2025.08.01

4afe80b MultilineTextField의 스타일 문제를 수정합니다.

  • 스크롤바가 요소 끝에 표시되도록 수정합니다.

Version Updates

2025.07.31

235147d action-button: size=medium, layout=withText variant에서 gap을 1 → 1.5로 수정합니다.

3c13ad7 highlight-magic-pressed 그라디언트 토큰을 추가합니다.

Version Updates

2025.07.29

a059fb0 Menu Sheet 컴포넌트를 추가하는 동시에 Action Sheet과 Extended Action Sheet 컴포넌트를 deprecate합니다.

  • Menu Sheet React 문서
  • Menu Sheet는 기존 Extended Action Sheet의 모든 기능을 포함하는 동시에, labelAlign prop으로 MenuSheetItem를 left 또는 center로 정렬할 수 있습니다.

3889eb6 Inline Banner의 스타일 문제를 수정합니다.

  • title과 description이 inline-flex로 레이아웃되던 문제를 해결합니다.
  • title과 description 간의 간격을 조정합니다.
  • 닫기 버튼(Dismissible)과 suffix icon, link label이 상단으로 레이아웃되던 문제를 해결합니다.

Callout의 스타일 문제를 수정합니다.

  • title과 description 간의 간격을 조정합니다.

Chip의 스타일 문제를 수정합니다.

  • Chip.Button의 label이 의도한 글꼴로 표시되도록 수정합니다.

Version Updates

2025.07.28

9b271d6 snippet의 deprecated 여부를 기록합니다. cli add 명령 실행 시 snippet 목록에서 deprecate 여부를 표시하고, --all로 모든 스니펫 추가 시 기본적으로 deprecated snippet을 제외합니다.

seed-design add --all # deprecated snippet 제외
seed-design add --all --include-deprecated # deprecated snippet 포함

Version Updates

2025.07.23

0ffcd48 Chip 컴포넌트가 추가되고, ActionChip, ControlChip 컴포넌트가 Deprecated 되었습니다.

  • Chip 컴포넌트
  • Chip 컴포넌트는 버튼과 토글 컴포넌트를 모두 포함하고 있습니다.

56e03ca Layout 컴포넌트 pb, pt, paddingBottom, paddingTop 속성에 safeArea 값을 지정할 수 있도록 지원

<Box pt="safeArea" paddingTop="safeArea" />
<Box pb="safeArea" paddingBottom="safeArea" />

Version Updates

2025.07.11

cdc0930 @seed-design/stackflow 백스와이프 애니메이션 개선

  • iOS 스타일 화면 전환 애니메이션의 지속 시간과 타이밍 함수가 300ms에서 350ms로 조정되어 더 부드러운 전환 효과를 제공합니다.
  • 스와이프 백 제스처 시 애니메이션이 보다 자연스럽고 일관되게 표현됩니다.
  • 스와이프 백 종료 시 CSS 변수를 활용해 전환 상태를 명확히 하여 사용자 경험이 개선되었습니다.

946faf7 그라디언트 토큰 추가 및 변경

  • fade-layer-floating, fade-layer-default 토큰이 추가되었습니다.
  • $gradient.shimmer-magic 토큰 stop color가 변경되었습니다.

71c58fd iOS Font Scaling

  • iOS 기기에서 시스템 폰트 크기 설정에 따라 동적으로 폰트 크기와 줄 높이를 조정하는 폰트 스케일링 옵션이 추가되었습니다.
  • 플러그인(webpack, vite, rsbuild)에서 fontScaling 옵션을 통해 폰트 스케일링 기능을 활성화할 수 있습니다.
  • data-seed-font-scaling='enabled' 일 때, 폰트 크기를 조정합니다.

Version Updates

2025.07.01

그라디언트 토큰 및 AI 관련 컴포넌트 업데이트

  • AI용 magic 테마와 중립적인 테마의 다양한 그라디언트(Shimmer, Fade, Glow, Highlight) 컬러 토큰이 추가되었습니다.
  • <Callout /> 컴포넌트의 tone="magic" 스타일이 변경되었습니다.
  • <Skeleton /> 컴포넌트에 tone prop이 추가되어 neutral과 magic 옵션을 제공합니다.
  • 모든 Layout 컴포넌트(Box, VStack, HStack 등)에서 bg/bgGradient 속성을 통해 그라디언트를 지정할 수 있습니다.
  • <Text /> 컴포넌트에 textDecorationLine 옵션이 추가되었습니다.
  • <HelpBubble /> 컴포넌트의 arrow가 상위 요소의 font-size에 영향받지 않도록 수정되었습니다.
  • <BottomSheet /> 컴포넌트의 description font-size가 t6에서 t5로 변경되었습니다.
  • 기존 보라색 계열 magic 관련 시맨틱 색상들(fg/magic, fg/magic-contrast, bg/magic-solid)이 삭제되었습니다.

Version Updates

2025.06.24

Alpha 컬러 업데이트

  • White와 black의 alpha 색상이 새롭게 추가되었습니다. (staticWhiteAlpha50 ~ staticWhiteAlpha1000, staticBlackAlpha100 ~ staticBlackAlpha1000)
  • stroke 색상에도 alpha 색상이 추가되었습니다.
  • 기존 alpha 색상 값들의 매핑이 변경되었습니다:
    • staticBlackAlpha500 → staticBlackAlpha700
    • staticBlackAlpha200 → staticBlackAlpha500
    • staticBlackAlpha50 → staticBlackAlpha200
    • staticWhiteAlpha200 → staticWhiteAlpha300
  • npx @seed-design/codemod@latest replace-alpha-color 코드모드를 제공합니다.

Version Updates

Last updated on

Codemod

Seed Design V2에서 V3로 마이그레이션하기 위한 코드 변환 도구

Library

리액트 아이콘 패키지는 아이콘을 사용할 때 필요한 컴포넌트를 제공합니다.