Changelog

2025.09.05

9d93518 Text 컴포넌트의 fontSize, lineHeight, color 속성에 string도 사용 가능하도록 변경했습니다.

91952e4 replace-semantic-stroke-color transform을 추가합니다.

@seed-design/css v0.2.0에 맞춰 replace-semantic-stroke-color transform을 추가합니다.
@seed-design/css/vars에서 사용한 stroke 토큰을 업데이트하는 마이그레이션 코드모드를 추가합니다.

Version Updates

2025.09.04

35984d0 Chip 컴포넌트를 업데이트합니다.

아이콘에 트랜지션 효과가 적용되지 않던 현상을 수정합니다.
Button, Toggle 등 사용되는 방식에 따라 적절한 data prop을 받도록 수정합니다.

c5bed96 Divider 컴포넌트가 $color.stroke.neutral-muted 색상을 기본값으로 사용하도록 수정합니다.

Version Updates

2025.09.03

8448880 시맨틱 stroke 컬러 토큰을 업데이트합니다.

이름이 변경되는 stroke 토큰

Color Role 규칙에 맞춰 일관적인 토큰 이름을 유지할 수 있도록 업데이트합니다.
이름이 변경되는 stroke 토큰을 사용하고 있는 경우, 간단한 Find & Replace 마이그레이션이 필요합니다.

기존	신규	비고
$color.stroke.neutral-muted	$color.stroke.neutral-subtle	가장 먼저 마이그레이션해야 합니다.
$color.stroke.on-image	$color.stroke.neutral-subtle
$color.stroke.neutral	$color.stroke.neutral-muted
$color.stroke.field-focused	$color.stroke.neutral-contrast
$color.stroke.control	$color.stroke.neutral-weak
$color.stroke.field	$color.stroke.neutral-weak
$color.stroke.brand	$color.stroke.brand-weak
$color.stroke.positive	$color.stroke.positive-weak
$color.stroke.informative	$color.stroke.informative-weak
$color.stroke.warning	$color.stroke.warning-weak
$color.stroke.critical	$color.stroke.critical-weak

색상이 변경되는 stroke 토큰 (마이그레이션 불필요)

$color.stroke.neutral-contrast (이름 변경 전 $color.stroke.field-focused)

모든 theme mode에서 $color.palette.gray-800 → $color.palette.gray-1000로 변경되었습니다.

신규 stroke 토큰 (마이그레이션 불필요)

신규
$color.stroke.neutral-solid
$color.stroke.brand-solid
$color.stroke.positive-solid
$color.stroke.informative-solid
$color.stroke.warning-solid
$color.stroke.critical-solid

Version Updates

2025.08.28

c51a261 font-size, line-height 토큰에 static variant를 추가합니다.

--seed-font-size-t1-static ~ --seed-font-size-t10-static
--seed-line-height-t1-static ~ --seed-line-height-t10-static

5f2ee39 CSS 최적화 도구(e.g. cssnano)가 CSS variable로 정의된 longhand declaration을 병합하지 않도록 합니다. (workaround, 관련 issue)

8299ba9 Snackbar 컴포넌트를 업데이트합니다.

root 영역에 maxWidth 스펙을 추가합니다.
pauseOnInteraction의 기본값을 false에서 true로 변경합니다.

d497166 플랫폼별 조건부 폰트 스케일링 제한 (iOS: 135%, Android: 150%) 적용

CSS 변수 --seed-{font-size|line-height}-limit-{min|max} 도입
빌드 타임 basePx 계산을 런타임 static 토큰 참조로 대체
global.ts에 폰트 스케일링 변수 통합

9a3c76a Divider 컴포넌트를 업데이트합니다.

orientation을 지정할 수 있습니다.
Divider를 li로 렌더링하여 ol, ul 내부에서 사용할 수 있습니다.
Divider를 div 또는 li로 렌더링하는 경우에도 role="separator"를 지정하여 스크린 리더가 Divider를 읽도록 할 수 있습니다.

Version Updates

2025.08.22

f806356 Page Banner 컴포넌트를 추가합니다. Inline Banner 컴포넌트를 deprecate합니다.

Inline Banner 컴포넌트 대비 모든 tone에서 모든 variant를 지원하며, 내부 Button의 충분한 터치 영역을 보장합니다.

<PageBanner
  tone="informative"
  variant="weak"
  description="사업자 정보를 등록해주세요."
  suffix={
    <PageBannerButton asChild>
      <a href="https://www.daangn.com" target="_blank" rel="noreferrer">
        새 탭에서 열기
      </a>
    </PageBannerButton>
  }
/>

시맨틱 색상 토큰을 추가하고 수정합니다.

$color.bg.positive-solid-pressed: theme-dark에서 $color.palette.green-500 → $color.palette.green-600
$color.bg.warning-solid-pressed 추가

1982494 Badge 컴포넌트를 업데이트합니다.

tone=warning variant를 추가합니다.
maxWidth 스펙을 추가합니다.

신규 시맨틱 색상 토큰을 추가합니다.

$color.fg.warning
$color.stroke.warning
$color.fg.brand-contrast
$color.bg.brand-weak
$color.bg.brand-weak-pressed

Version Updates

2025.08.20

0be9b00 Avatar, Avatar Stack 컴포넌트에 size=108 variant를 추가합니다.

Version Updates

2025.08.12 #2

62094b6 Help Bubble의 스타일 문제를 수정합니다.

placement=left-* / placement=right-*에서 arrow가 content와 떨어져 표시되는 문제를 수정합니다.

Version Updates

2025.08.12

9993e0e 레이아웃 컴포넌트를 사용할 때 flexGrow, flexShrink, flexWrap에도 true를 사용할 수 있도록 수정합니다.

Figma 레이어가 이미지 Fill을 가지고 있는 경우 <img /> 요소를 prepend합니다.

Version Updates

2025.08.11

ef91c21 Bottom Sheet의 스타일 문제를 수정해요.

Close Button에 브라우저 기본 스타일이 표시되는 문제를 수정해요.

aa40f66 Figma 컴포넌트 정보 및 핸들러를 최신화하고 codegen을 업데이트합니다.

Instance에 오버라이드한 내용이 있는 경우 주석으로 알립니다.

Version Updates

2025.08.07

5a025b7 Switch 컴포넌트를 업데이트합니다.

size: medium → 32, small → 16으로 rename합니다.
- (React) size="medium"으로 32, size="small"로 16을 사용할 수 있습니다. (deprecated)
size: 24를 추가합니다.
모든 size에 대해 레이블 스타일을 추가합니다. (기존: small에만 존재)

f9379e0 Figma 컴포넌트 핸들러 정보를 최신화하고 정확한 prop을 생성하도록 수정합니다.

Chip, Progress Circle, Switch 컴포넌트 핸들러를 업데이트합니다.
grow 대신 flexGrow가 생성되도록, borderWidth가 string으로 생성되도록 수정합니다.

ac35731 Chip.Root position: relative 속성 추가

이제 Chip.Toggle을 사용해도 예상치 못한 스크롤이 발생하지 않습니다.

f9041e9 CheckSelectBox, RadioSelectBox의 label, description 영역을 수정합니다.

span 대신 div를 렌더링합니다.
기본적으로 grow하도록 만들어 Badge 등 추가 요소를 넣기 쉽게 만듭니다.

Version Updates

2025.08.04

2e2cc53 - Figma 컴포넌트 핸들러 및 스타일 정보를 최신화합니다.

normalize 과정에서 그라디언트 정보를 포함하도록 수정합니다.

609b8f3 iOS의 더 큰 텍스트 기능에 제한을 둡니다.

iOS는 7단계(XS ~ XXXL)의 텍스트 크기 조절 이외에도, 보다 더 큰 텍스트를 위한 더 큰 텍스트 기능을 제공합니다.
iOS 네이티브에서는 더 큰 텍스트의 UI 레이아웃 대응이 어렵다고 결정하여, XXXL(135%) 이상의 텍스트 크기 조절을 지원하지 않습니다.
웹뷰도 iOS와 동일한 제한을 위한 기능이 추가되었습니다.

99e7f2c figma-extractor (Figma REST API 호출 결과를 파일로 저장하는 CLI 툴) 설정 파일 작성 방법을 개선합니다.

사용자가 직접 API 호출부터 파일 저장까지의 파이프라인을 작성할 수 있습니다.

Version Updates

2025.08.01

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

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

Version Updates

@seed-design/[email protected]

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

@seed-design/[email protected]

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 코드모드를 제공합니다.

Changelog

On this page