SEED Design

Changelog

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

2025.12.08

Figma Codegen 정보를 최신화합니다. 6d680ba

영향받는 패키지

seedFontMultiplier, seedFontScaling attribute를 추가합니다 8d0ad90

  • seedFontMultiplier: 폰트 크기 스케일링 계수 (e.g. 0.8, 1.35, 1.5, 1)
  • seedFontScaling: 폰트 크기 스케일링 활성화 여부 (e.g. "enabled")

영향받는 패키지

cssnano 등 CSS 최적화 도구를 사용할 때, bleedX와 bleedY 중 한 가지 속성만 정의하는 경우 bleed가 적용되지 않던 문제를 수정합니다. 8f31f93

영향받는 패키지

Overlay 컴포넌트에 skipAnimation 옵션을 추가합니다 69ccc6e

영향받는 패키지

Badge의 크기와 Field의 indicator 크기 및 여백이 폰트 스케일링 제한의 영향을 받도록 업데이트합니다. 279001a

영향받는 패키지

2025.12.04

@seed-design/stackflow: @stackflow/react-ui-core를 peerDependencies에서 dependencies로 이동합니다. ea488c5

영향받는 패키지

Figma MCP가 export_node_as_image 툴과 clone_node 툴 호출 후 반환 결과를 정상적으로 파싱하지 못하는 문제를 수정합니다. b58ac46

영향받는 패키지

2025.12.01

Figma 엔티티 및 Codegen을 업데이트합니다. (신규 아이콘 및 ResultSection Codegen 지원) bc9f9a0

영향받는 패키지

TagGroupRoot의 children이 null 또는 undefined를 포함하는 경우 불필요한 separator가 표시되는 문제를 수정합니다. a2b874b

영향받는 패키지

peerDeps에 @seed-design/css 패키지가 추가됩니다. 12ffece

영향받는 패키지

PageBanner에 tone="magic" 스타일을 추가합니다. db5de74

영향받는 패키지

Segmented Control의 스타일을 업데이트합니다: Indicator에서 shadow 정의를 제거합니다. 70d11b8

영향받는 패키지

TabsCarousel에 onSwipeStart, onSwipeEnd 이벤트 콜백을 추가합니다. 938bf0b

영향받는 패키지

TextFieldInput 및 TextFieldTextarea (text-input 스타일시트)에서 브라우저 기본 자동 완성 스타일이 표시되지 않도록 수정합니다. c03a3dd

영향받는 패키지

Field(TextField)의 스타일을 수정합니다. a12e49b

  • maxGraphemeCount를 사용하지만 description을 사용하지 않는 경우 maxGraphemeCount가 우측이 아닌 좌측에 표시되는 문제를 수정합니다.
  • Tailwind Preflight 사용 시 Character Count 영역이 디자인 의도보다 높이를 더 많이 차지하는 문제를 수정합니다.

영향받는 패키지

2025.11.26

AppBar에 적용되는 그라디언트를 AppScreen으로 이동합니다. 37d332d

  • <AppBar tone="transparent">를 사용하는 경우 tone="transparent"를 AppScreen으로 옮겨 그라디언트를 표시할 수 있습니다.
  • AppScreen에 gradient={false}를 설정하여 그라디언트를 숨길 수 있습니다.

영향받는 패키지

iOS 웹뷰 환경에서 Avatar가 정상적으로 렌더링되지 않는 문제를 수정합니다. 77517f1

영향받는 패키지

Stackflow 플러그인이 최신이 아닌 data attribute에 의해 잘못된 트랜지션을 재생하지 않도록 수정합니다. afa281b

영향받는 패키지

2025.11.21

List Item에 신규 active(pressed) 스타일을 적용하고, disabled 상태에서 detail 영역의 색상을 수정합니다. 8752805

영향받는 패키지

Help Bubble이 기본적으로 z-index 99를 가지도록 수정합니다. (HelpBubblePositioner 또는 HelpBubblePositionerPortal에 직접 인라인 스타일을 적용한 경우 인라인 스타일이 우선 적용됩니다.) ee98674

영향받는 패키지

@seed-design/react에서 unicode-segmenter가 externalize되지 않는 문제를 수정합니다. 8edbf00

영향받는 패키지

BottomSheet에 handleOnly 옵션이 정상적으로 동작하지 않는 이슈를 수정합니다 e3806c1

영향받는 패키지

2025.11.20

Scroll Fog 컴포넌트가 항상 fog를 표시하게 변경하고 padding 가이드라인을 추가합니다 f4c62f6

영향받는 패키지

스타일시트에서 logical property(padding-block 등)를 physical property(padding-left 및 padding-right 등)로 교체합니다. (브라우저 지원) bee919c

영향받는 패키지

Slider Value Indicator가 표시되는 조건을 설정하는 valueIndicatorTrigger prop을 추가합니다. ("active"|"hover", 기본값: "active") 1340675

영향받는 패키지

Slider Value Indicator가 Track 양 끝에 있을 때 Track 바깥 영역을 차지하지 않도록 수정합니다. 1340675

영향받는 패키지

2025.11.18

transparent 상태 컬러 추가, 컴포넌트 상태 컬러 변경, transition 추가 dfe6c1e

  • $color.bg.transparent-pressed 컬러와 $color.bg.transparent 컬러가 추가되었습니다.
  • 다음 컴포넌트들의 색상이 transparent 관련 토큰으로 변경되었습니다.
    • Chip (outlineStrong, outlineWeak)
    • Action Button (neutralOutline, brandOutline, ghost)
    • Checkmark
    • Tabs (outline)
    • List Item
    • Radiomark
    • Reaction Button
    • Select Box
  • 다음 컴포넌트들의 color transition이 추가되었습니다. (duration: $duration.d3, timing-function: $timing-function.easing)
    • Checkmark
    • Radiomark
    • Reaction Button
    • Select Box

영향받는 패키지

다음 컴포넌트들의 color transition을 $duration.color-transition (d3) 토큰으로 변경합니다 a09e6b4

  • Action Button
  • Bottom Sheet Handle
  • Checkmark
  • Tabs (outline)
  • Chip
  • Contextual Floating Button
  • Floating Action Button
  • Input Button
  • List Item
  • Radiomark
  • Reaction Button
  • Segmented Control Item
  • Select Box
  • Text Input
  • Toggle Button

영향받는 패키지

2025.11.17

BottomSheetBody에 제공한 style 관련 prop(paddingX 등)이 적용되지 않고 DOM으로 bleed되는 문제를 수정합니다. 03ff678

영향받는 패키지

FieldButton에 Read Only 상태를 추가합니다. Disabled 상태인 FieldButton은 내부 <input />도 disabled 속성을 갖도록 수정합니다. 53290ab

영향받는 패키지

@seed-design/stackflow 패키지에서 useActivityZIndexBase 훅을 제공합니다. 7529e31

영향받는 패키지

use-prevent-scroll 로직을 삭제합니다 cc8864d

영향받는 패키지

:focus-visible selector를 사용하기 전 브라우저에서 selector를 지원하는지 확인합니다. ae1b768

영향받는 패키지

telemetry 옵션을 추가합니다 a6ae76f

영향받는 패키지

2025.11.13

@radix-ui/react-dialog 의존성을 추가해 React 패키지를 Portable하게 수정합니다 77d304d

영향받는 패키지

Stackflow의 AppScreen에 있던 gradient 스타일을 AppBar로 이동합니다 795668c

영향받는 패키지

2025.11.11

일반적인 CSS Reset을 사용하지 않는 환경에서도 스타일이 의도한 대로 표시될 수 있도록 수정합니다. 15c658b

  • list-header에 box-sizing: border-box; 추가
  • button으로 렌더링되는 컴포넌트 스타일 수정

영향받는 패키지

PopoverPositionerPortal과 HelpBubblePositionerPortal을 추가합니다. 2c302a5

영향받는 패키지

Release @seed-design/react-scrollable bc3cd6f

영향받는 패키지

BottomSheetContent에 style 객체가 전달되지 않는 버그를 수정합니다. 4102a4b

영향받는 패키지

1.1 이전 버전과 호환 가능하도록 임시적으로 사용할 text-input size=medium variant를 추가합니다. f4e07bb

  • 영향 받는 React 컴포넌트: TextFieldInput, TextFieldTextarea

영향받는 패키지

Export 수정: DialogProps → UseDrawerProps e272ef8

영향받는 패키지

uncontrolled 상태에서 onOpenChange가 두번 호출되는 버그를 수정합니다

영향받는 패키지

body에 강제로 스타일을 주입하는 noBodyStyles 옵션의 기본값을 true로 변경합니다 4971dcc

영향받는 패키지

Figma Codegen 컴포넌트 핸들러를 업데이트합니다. 레거시 Text Field에 대한 Codegen을 한시적으로 지원합니다. d986fd5

영향받는 패키지

text-input의 readonly 스타일을 업데이트합니다. 114dafd

  • 영향 받는 React 컴포넌트: TextFieldInput, TextFieldTextarea

영향받는 패키지

Scroll Fog 컴포넌트를 추가합니다 bc3cd6f

영향받는 패키지

2025.11.05

Figma 토큰 정보 및 Codegen 핸들러를 최신화합니다. 4c5d7c4

영향받는 패키지

2025.11.04 #2

@seed-design/react-drawer 패키지 배포 68b5eab

영향받는 패키지

2025.11.04

(BREAKING CHANGE: TextField snippet을 다시 설치해야 합니다.) Text Field 관련 컴포넌트를 업데이트합니다. 6af6501

  • 스타일 업데이트
  • size 통일 및 variant (underline) 추가
  • 내부적으로 Field 컴포넌트를 사용하도록 변경하여 스타일 일관성 향상

Field Button 컴포넌트를 추가합니다.

영향받는 패키지

Slider 컴포넌트를 추가합니다. a55f584

영향받는 패키지

Action Button 컴포넌트를 variant=ghost로 사용하는 경우 fontWeight를 사용자화할 수 있도록 업데이트합니다. 6af6501

(BREAKING CHANGE: Error State snippet을 다시 설치해야 합니다.) Error State 스니펫에서 Action Button을 활용하도록 업데이트합니다.

영향받는 패키지

AppScreen에 tone 속성을 조절해 그라데이션이 들어간 투명한 배경을 사용할 수 있습니다. b131282

  • AppBar에 있던 tone 속성을 AppScreen에서도 사용할 수 있도록 이동합니다.
  • AppScreen, AppBar 둘 다 tone 속성을 사용할 수 있도록 합니다.

영향받는 패키지

@seed-design/react-drawer 1.0.0 33def2d

영향받는 패키지

(BREAKING CHANGE: PageBanner snippet을 다시 설치해야 합니다.) Page Banner 스니펫을 업데이트합니다. 6af6501

  • Box를 사용하여 스타일링하던 부분을 PageBanner.Body로 교체합니다.
  • PageBanner.TextContent를 PageBanner.Content로 이름 변경합니다.

영향받는 패키지

닫힌 HelpBubbleAnchor/HelpBubbleTrigger가 불필요하게 리렌더링되지 않도록 수정합니다. 0c1ab6a

영향받는 패키지

(BREAKING CHANGE: BottomSheet snippet을 다시 설치해야 합니다.) BottomSheet에 드래그를 통해 닫는 기능을 추가합니다. 33def2d

  • vaul headless 코드 기반으로 seed에 맞게 커스텀하여 구현했습니다.
  • vaul과 동일한 인터페이스를 가지고 있습니다. (snap-points, fade-from-index, etc.)
  • npx @seed-design/cli@latest add ui:bottom-sheet로 snippet을 최신화하세요.

영향받는 패키지

2025.10.27

Article에서 selection 색상에 대한 정의를 제거합니다. e52d6d1

영향받는 패키지

Tailwind Preflight 사용 시 Page Banner가 디자인 의도와 다르게 표시되는 문제를 수정합니다. 97669bc

영향받는 패키지

List Item 컴포넌트의 상하 여백을 $dimension.x2_5에서 $dimension.x3로 늘립니다. 15ab93a

영향받는 패키지

Tailwind Preflight 사용 시 Text Field의 Header/Footer와 Callout이 디자인 의도와 다르게 표시되는 문제를 수정합니다. 50366c0

영향받는 패키지

2025.10.23

Tag Group 컴포넌트를 추가합니다. Tag Group은 아이콘 및 텍스트로 이루어진 태그를 구분 기호와 함께 수평 레이아웃으로 표시하는 컴포넌트입니다. 6aafce0

영향받는 패키지

AppBar의 스타일을 업데이트합니다. 1902dfa

  • Top Navigation의 title 및 description에 lineHeight 값을 정의합니다. (React AppBar 컴포넌트에 반영됩니다.)
  • <Icon /> 컴포넌트를 활용하여 <AppBarIconButton /> 내부 아이콘을 커스터마이징할 수 있도록 수정합니다.

영향받는 패키지

Article 유틸리티 컴포넌트를 추가하고 Text 컴포넌트를 업데이트합니다. f2ddf29

  • Article 컴포넌트는 일관된 selection 스타일 및 줄바꿈 정책을 사용할 수 있게 돕습니다.
  • Text 컴포넌트에서 textDecorationLine="underline" 및 whiteSpace, userSelect prop을 지원합니다.

영향받는 패키지

Switch가 checked 상태가 아닐 때 thumb 크기를 줄여 상태를 인지하기 쉽도록 합니다. enabled-disabled 상태 간 트랜지션을 추가합니다. 4c33f07

영향받는 패키지

Switch와 Switch Mark의 disabled 상태를 더 잘 구별할 수 있도록 스타일을 수정합니다. 3df657f

영향받는 패키지

2025.10.17

Text Field와 Multiline Text Field가 기본적으로 배경 색을 갖지 않도록 수정합니다. f1cf4cd

영향받는 패키지

PullToRefresh.preventPull을 활용하여 PullToRefreshContent 내부에서 당겨서 새로고침(PTR) 동작을 비활성화할 수 있습니다. 687b261

영향받는 패키지

실제 기본값을 표시하도록 JSDoc을 업데이트합니다. 687b261

영향받는 패키지

AppScreen에서 스와이프로 pop할 때 AppScreen이 한번 깜빡거리고 닫히는 버그를 수정합니다. 9b91751

영향받는 패키지

매너온도 L9 전경 및 배경 색상의 채도를 낮춥니다. 3898183

영향받는 패키지

2025.10.10

closeOnInteractOutside를 false로 설정하여 Help Bubble 외부와 상호작용 시에도 닫히지 않도록 설정할 수 있습니다. (기본값: true) b10ff0b

영향받는 패키지

2025.10.02

HelpBubble의 스타일을 업데이트하고, 신규 기능을 지원합니다. 0b8a02e

  • arrowTip이 content에서 떨어져 보이던 문제를 수정합니다.
  • title과 description에서 \n을 줄바꿈으로 렌더링하도록 수정합니다.
  • closeOnInteractOutside를 false로 설정하여 Help Bubble 외부와 상호작용 시에도 닫히지 않도록 설정할 수 있습니다. (기본값: true)

영향받는 패키지

@seed-design/docs-mcp 패키지 추가 8661d79

Tools:

  • get_react_component
  • get_breeze_component
  • get_react_changelog
  • list_react_components
  • list_breeze_components
  • get_react_changelog

영향받는 패키지

Callout에 tone=positive variant를 추가합니다. 6c6099d

영향받는 패키지

Figma Codegen이 Bottom Sheet의 hideCloseButton prop을 사용하는 코드를 반환하도록 수정합니다. ac1fd00

영향받는 패키지

Figma 아이콘 및 스타일 정보를 최신화합니다. 8b07555

영향받는 패키지

2025.09.29

6d2e13d MannerTemp 컴포넌트가 레이아웃에서 너비를 덜 차지하도록 업데이트합니다.

영향받는 패키지

2025.09.26

1420b68 MannerTemp 컴포넌트가 레이아웃에서 높이를 덜 차지하도록 업데이트합니다.

영향받는 패키지

2025.09.25

39a96f1 (BREAKING CHANGE: Snackbar Snippet을 다시 설치해야합니다) Snackbar 컴포넌트 변경

  • Snackbar의 배경색이 다크모드에서 흰색으로 변경됩니다.
  • Prefix 요소유무에 따라 여백이 변경됩니다.
  • npx @seed-design/cli@latest add ui:snackbar 명령어로 설치하세요.

2cf90ac 🌱 SEED Design 패키지의 첫 메이저 버전을 출시합니다.

e038490 (BREAKING CHANGE: Snippet을 다시 설치해야 합니다.) Manner Temp, Manner Temp Badge 컴포넌트를 업데이트합니다.

  • snippet 내 오타 수정
  • 신규 10단계 반영
  • 업데이트 가이드
    1. @seed-design/css@latest @seed-design/react@latest 설치
    2. npx @seed-design/cli@latest add ui:manner-temp ui:manner-temp-badge로 snippet 최신화
    3. 온도 범위가 변경되었으므로, <MannerTemp level="l1" /> 혹은 <MannerTempBadge level="l1" />과 같이 level을 직접 지정하여 사용하고 있는 경우가 있는지 확인

4153ca5 HelpBubble 컴포넌트의 배경색이 다크모드에서 흰색으로 변경됩니다.

a7d07f0 (BREAKING CHANGE: SwitchMark 사용을 위해서는 Snippet을 다시 설치해야 합니다.) Switch의 토글 영역만을 정의한 Switch Mark 컴포넌트를 추가합니다.

  • npx @seed-design/cli@latest add ui:switch 명령어로 설치하세요.

(BREAKING CHANGE: ListHeader 사용을 위해서는 Snippet을 다시 설치해야 합니다.) List Header 컴포넌트를 추가합니다.

  • npx @seed-design/cli@latest add ui:list 명령어로 설치하세요.

영향받는 패키지

2025.09.22

0ca19c0 Segmented Control 컴포넌트를 업데이트합니다.

  • Notification Badge를 표시하는 notification prop을 추가합니다.
  • SegmentedControlItem의 children을 string에서 ReactNode로 확대합니다.
  • 스타일을 업데이트합니다.

950c9e1 add 명령어 사용 방식을 변경합니다.

  • 항목 추가
seed-design add ui:action-button breeze:animate-number # ui 이외 레지스트리의 항목도 추가할 수 있게 되었습니다.
  • 특정 레지스트리에 있는 모든 항목 추가
seed-design add-all ui lib breeze
  • 모든 레지스트리의 모든 항목 추가
seed-design add-all --all

패키지 의존성 및 스니펫 의존성 설치 방식을 최적화합니다.

bef65a6 Figma Variable & Variable Collection 정보를 최신화합니다.

11f5e76 Snackbar 헤드리스에서 닫기 버튼에 하드코딩된 aria-label 속성을 제거합니다.

영향받는 패키지

2025.09.12

afdd1ee Figma Codegen을 위한 컴포넌트 핸들러를 업데이트합니다.

  • List, Checkmark, RadioMark, Radio, Tabs, ChipTabs 지원
  • Chip, Divider, HelpBubble, Switch, Checkbox 업데이트

8ebe8a5 Switch, Checkmark, Radio Mark의 스타일을 업데이트합니다.

  • tone=neutral variant를 추가합니다.
  • Switch의 thumb 크기를 조정합니다.

Checkbox와 Radio의 weight variant를 default, stronger에서 regular, bold로 수정합니다.

f61b80d 다크 모드에서의 색상 대비 보장을 위해 시맨틱 색상을 수정하고 컴포넌트에서의 색상을 변경합니다.

  • $color.bg.warning-solid: theme-dark에서 $color.palette.yellow-600 → $color.palette.yellow-800
  • $color.bg.warning-solid-pressed: theme-dark에서 $color.palette.yellow-700 → $color.palette.yellow-900
  • Badge, Page Banner의 tone=warning, variant=solid variant에서 전경 항목 색상 변경: $color.fg.neutral → $color.palette.static-black-alpha-900

ce047f5 Tabs.Carousel의 reInit 이벤트 시 탭 인덱스가 변경되지 않는 문제를 수정합니다.

영향받는 패키지

2025.09.08

a22b8b9 ChipTabs 컴포넌트 Variant, Size 변경 및 디자인 수정

  • variant neutralOutline 추가
  • variant brandSolid deprecated
  • size(medium(default) | large) 추가

5836976 text-field의 value slot이 input의 size attribute로 인해 기본적으로 width를 가지는 문제를 해결합니다.

12faf5a List 컴포넌트를 추가하고, Checkbox 및 Radio 컴포넌트를 개선합니다.

  • List 컴포넌트를 제공하여, 정보를 구조화된 목록 형태로 표시할 수 있도록 합니다.
  • Checkbox와 Radio의 컨트롤 영역만을 표시하는 Checkmark와 RadioMark를 제공합니다.
  • Select Box에서 컨트롤 영역을 Checkmark와 RadioMark로 교체합니다.
  • RadioGroup 컴포넌트를 제공합니다.

영향받는 패키지

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 토큰을 업데이트하는 마이그레이션 코드모드를 추가합니다.

영향받는 패키지

2025.09.04

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

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

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

영향받는 패키지

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

영향받는 패키지

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를 읽도록 할 수 있습니다.

영향받는 패키지

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

영향받는 패키지

2025.08.20

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

영향받는 패키지

2025.08.12 #2

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

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

영향받는 패키지

2025.08.12

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

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

영향받는 패키지

2025.08.11

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

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

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

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

영향받는 패키지

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 등 추가 요소를 넣기 쉽게 만듭니다.

영향받는 패키지

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 호출부터 파일 저장까지의 파이프라인을 작성할 수 있습니다.

영향받는 패키지

2025.08.01

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

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

영향받는 패키지

2025.07.31

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

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

영향받는 패키지

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이 의도한 글꼴로 표시되도록 수정합니다.

영향받는 패키지

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 포함

영향받는 패키지

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" />

영향받는 패키지

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' 일 때, 폰트 크기를 조정합니다.

영향받는 패키지

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)이 삭제되었습니다.

영향받는 패키지

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

영향받는 패키지

Last updated on

On this page

2025.12.08
2025.12.04
2025.12.01
2025.11.26
2025.11.21
2025.11.20
2025.11.18
2025.11.17
2025.11.13
2025.11.11
2025.11.05
2025.11.04 #2
2025.11.04
2025.10.27
2025.10.23
2025.10.17
2025.10.10
2025.10.02
2025.09.29
2025.09.26
2025.09.25
2025.09.22
2025.09.12
2025.09.08
2025.09.05
2025.09.04
2025.09.03
2025.08.28
2025.08.22
2025.08.20
2025.08.12 #2
2025.08.12
2025.08.11
2025.08.07
2025.08.04
2025.08.01
2025.07.31
2025.07.29
2025.07.28
2025.07.23
2025.07.11
2025.07.01
2025.06.24