@highpixel-co/palda-design-system 0.4.1 → 0.5.0

package/dist/guide/catalog/drafts.yml

@@ -0,0 +1,333 @@
+# Draft는 승인 대기열이 아니라 추적 가능한 임시 결정이다. based_on에는 Stable catalog key만 쓴다.
+# 기존 Stable 컴포넌트 기반이 없으면 based_on_none_reason으로 그 이유를 명시한다.
+
+layout-popup-width:
+  catalog: tokens
+  entry: layout-popup-width
+  based_on_none_reason: 브라우저 확장 팝업과 같은 역할의 Stable layout width token이 없다
+  reused:
+    - 기존 layout namespace와 전역 palda 접두사
+    - 기존 팝업의 310px content와 좌우 20px inset이 만든 350px 외곽 폭
+  gap: sidebar와 page content가 아닌 브라우저 확장 팝업 표면의 폭 token이 없다
+  rejected_alternatives:
+    - sidebar-width 220px은 내비게이션 열 전용이라 팝업 역할과 실제 폭을 모두 왜곡한다
+    - content-width 1220px은 페이지 본문 전용이라 팝업에 사용할 수 없다
+  added:
+    - 브라우저 확장과 좁은 독립 팝업 표면용 350px layout width
+  unchanged:
+    - sidebar와 content width 및 기존 spacing scale
+  feedback_questions:
+    - 기존 외곽 폭 350px을 유지하는 것이 새 DS 밀도에서도 적절한가
+
+alert:
+  catalog: components
+  entry: alert
+  based_on_none_reason: 흐름을 끊지 않고 화면에 남아 안내를 전하는 Stable 표면이 없다
+  reused:
+    - Badge와 같은 축의 틴트 조합 — 배경 {family}/subtle, 글자 text/{family}
+    - 기존 아이콘 세트와 본문 typography
+  gap: 화면에 남아 있는 안내·경고·오류를 담을 자리가 없다
+  rejected_alternatives:
+    - Toast는 잠깐 떴다 사라져서 남아 있어야 하는 안내에 못 쓴다
+    - Modal은 흐름을 끊어서 읽고 넘어가는 안내에 과하다
+    - TextField의 error는 필드 하나에, FormSection의 오류는 섹션 하나에 붙는다
+  added:
+    - neutral·accent·warning·danger 4종과 이어서 할 액션 슬롯 하나
+  unchanged:
+    - 보더를 주지 않는 기본값(0011)과 role을 variant에서 파생하는 규칙(0004)
+  feedback_questions:
+    - 파랑 계열 primitive가 없어 info variant를 두지 않았는데 파란 배너가 필요한가
+    - 닫을 수 있는 배너가 필요한가 — 지금은 닫기 버튼을 두지 않았다
+
+checkbox:
+  catalog: components
+  entry: checkbox
+  based_on_none_reason: 다중 선택을 나타내는 Stable form control이 없다
+  reused:
+    - 기존 control size와 focus token
+    - 기존 label typography
+  gap: 다중 선택과 약관 동의를 네이티브 의미로 제공할 요소가 없다
+  rejected_alternatives:
+    - Switch는 즉시 반영되는 설정 의미다
+    - Chip은 필터와 선택 목록 의미다
+  added:
+    - checked와 unchecked와 disabled 상태
+  unchanged:
+    - label 클릭과 focus-visible 접근성 원칙
+  feedback_questions:
+    - disabled checked 표시의 대비가 충분한가
+
+dropdown-button:
+  catalog: components
+  entry: dropdown-button
+  based_on:
+    - button
+  reused:
+    - Button trigger의 typography와 높이와 focus
+    - 기존 surface와 shadow token
+  gap: 하나의 트리거에 여러 액션을 연결하는 Stable 요소가 없다
+  rejected_alternatives:
+    - Button 여러 개는 좁은 공간에서 액션 우선순위를 흐린다
+    - Radio는 액션 목록을 표현하지 않는다
+  added:
+    - trigger 주변 menu surface와 keyboard selection
+  unchanged:
+    - Button의 visual contract
+  feedback_questions:
+    - 메뉴 폭과 정렬과 chevron 표현이 적절한가
+
+link:
+  catalog: components
+  entry: link
+  based_on_none_reason: 주소 이동 의미를 가진 Stable text component가 없다
+  reused:
+    - 기존 text와 accent와 focus token
+    - 기존 typography class
+  gap: 새 탭과 주소 복사 의미를 보존하는 inline navigation 요소가 없다
+  rejected_alternatives:
+    - Button은 주소 이동의 브라우저 기본 동작을 제공하지 않는다
+  added:
+    - primary와 accent link 및 external 표시
+  unchanged:
+    - 네이티브 anchor 동작
+  feedback_questions:
+    - 기본 밑줄과 visited 저강도 표현이 적절한가
+
+modal:
+  catalog: components
+  entry: modal
+  based_on:
+    - button
+    - icon-button
+  reused:
+    - 기존 Button과 IconButton action
+    - 기존 surface와 shadow와 spacing token
+  gap: 흐름을 멈추고 포커스를 관리하는 Stable dialog surface가 없다
+  rejected_alternatives:
+    - Card는 포커스를 가두거나 배경을 inert 처리하지 않는다
+  added:
+    - dim과 focus trap과 scroll lock과 Escape close
+  unchanged:
+    - action button contract와 typography
+  feedback_questions:
+    - 기본 폭과 dim 강도와 close 위치가 적절한가
+
+navigation-button:
+  catalog: components
+  entry: navigation-button
+  based_on:
+    - button
+  reused:
+    - Button typography와 focus와 icon spacing
+    - 기존 navigation semantic color
+  gap: 현재 위치를 표시하는 사이드바 전용 이동 항목이 없다
+  rejected_alternatives:
+    - 일반 Button은 현재 위치와 주소 이동 의미를 제공하지 않는다
+    - Chip은 보기 필터 의미다
+  added:
+    - 주소 이동용 anchor와 동작용 button 의미 분리
+    - aria-current와 selected navigation 표현
+  unchanged:
+    - 기존 action size와 icon rules
+  feedback_questions:
+    - 비선택 항목 대비와 모바일 줄 배치가 적절한가
+
+progress-bar:
+  catalog: components
+  entry: progress-bar
+  based_on_none_reason: 끝이 정해진 작업의 진행률을 값으로 보여주는 Stable 요소가 없다
+  reused:
+    - 기존 primary 채움과 트랙의 surface/sunken
+    - 기존 label typography와 radius scale
+  gap: 작업이 얼마나 찼는지를 값으로 보여줄 요소가 없다
+  rejected_alternatives:
+    - 스피너는 끝을 모르는 대기용이라 진행률을 못 전한다
+    - 단계 목록은 진행률이 아니라 구조다. 진행률은 값 하나다
+  added:
+    - label과 값이 짝인 막대 하나. label은 필수다
+  unchanged:
+    - 값과 aria가 같은 수를 쓰는 접근성 원칙
+  feedback_questions:
+    - 높이 8px은 명세 실측값이고 대응 토큰이 없다. 반복이 확인되면 토큰으로 올릴 것인가
+    - 색으로 상태를 가르는 variant가 필요한가 — 지금은 채움이 accent가 아니라 primary 하나다
+
+tab:
+  catalog: components
+  entry: tab
+  based_on:
+    - button
+  reused:
+    - Button typography와 focus token
+    - 기존 accent semantic color
+  gap: 같은 화면 안의 단일 view를 전환하는 Stable tab control이 없다
+  rejected_alternatives:
+    - Chip은 다중 filter toggle 의미가 있다
+    - Button은 tab 관계와 선택 상태를 전달하지 않는다
+  added:
+    - tab role과 selected underline state
+  unchanged:
+    - 기존 text와 focus 체계
+  feedback_questions:
+    - 활성 underline과 탭 간격이 적절한가
+
+toast:
+  catalog: components
+  entry: toast
+  based_on:
+    - button
+    - icon-button
+  reused:
+    - Stable action controls
+    - 기존 floating surface와 semantic token
+  gap: 작업 결과를 흐름을 막지 않고 잠시 알리는 Stable feedback component가 없다
+  rejected_alternatives:
+    - Alert는 화면 안에 계속 남는 메시지다
+    - Modal은 확인이 필요 없는 결과의 흐름을 막는다
+  added:
+    - timed live-region message와 dismiss action
+  unchanged:
+    - Button과 IconButton action contract
+  feedback_questions:
+    - 위치와 유지 시간과 최대 폭이 적절한가
+
+tooltip:
+  catalog: components
+  entry: tooltip
+  based_on:
+    - icon-button
+  reused:
+    - Stable trigger focus behavior
+    - 기존 floating surface와 typography token
+  gap: 아이콘과 축약 UI의 짧은 설명을 hover와 focus 모두에 제공할 요소가 없다
+  rejected_alternatives:
+    - Popover는 상호작용 콘텐츠를 위한 더 무거운 표면이다
+  added:
+    - hover와 focus description surface
+  unchanged:
+    - trigger의 accessible name 책임
+  feedback_questions:
+    - 지연 시간과 위치와 최대 폭이 적절한가
+
+app-shell:
+  catalog: patterns
+  entry: app-shell
+  based_on_none_reason: 페이지 전체 레이아웃을 정의하는 Stable pattern이 없다
+  reused:
+    - 기존 layout과 spacing과 breakpoint token
+    - Stable navigation action
+  gap: sidebar와 top row와 status와 body를 일관되게 배치하는 canonical shell이 없다
+  rejected_alternatives:
+    - 화면별 layout은 여백과 배경 위계를 반복해서 달리 만든다
+  added:
+    - full-height sidebar와 content bands와 responsive collapse
+  unchanged:
+    - 각 화면이 자신의 상태를 소유하는 원칙
+  feedback_questions:
+    - sidebar 폭과 mobile 전환과 상단 행 밀도가 적절한가
+
+card:
+  catalog: patterns
+  entry: card
+  based_on:
+    - button
+  reused:
+    - Button의 selectable interaction semantics
+    - 기존 surface와 border와 radius token
+  gap: 선택 가능한 객체와 최상위 요약 면을 일관되게 담는 Stable pattern이 없다
+  rejected_alternatives:
+    - FormSection은 설정 묶음이고 surface를 만들지 않는다
+    - ListRow는 행 나열과 요약 값에 맞는다
+  added:
+    - selectable button card와 noninteractive section card
+  unchanged:
+    - shadow는 floating surface에만 쓰는 원칙
+  feedback_questions:
+    - 선택 border와 container padding과 사용 범위가 적절한가
+
+list-row:
+  catalog: patterns
+  entry: list-row
+  based_on:
+    - icon-button
+  reused:
+    - Stable trailing action과 icon size
+    - 기존 divider와 typography token
+  gap: 제목과 설명과 좌우 slot을 가진 정보 행 pattern이 없다
+  rejected_alternatives:
+    - Card 반복은 목록 밀도와 위계를 과도하게 높인다
+  added:
+    - divider row와 filled summary tone과 optional selection
+  unchanged:
+    - action은 별도 control이 소유하는 원칙
+  feedback_questions:
+    - 긴 trailing 줄바꿈과 모바일 정렬이 적절한가
+
+form-section:
+  catalog: patterns
+  entry: form-section
+  based_on_none_reason: 제목과 설명과 상태를 가진 무표면 section Stable pattern이 없다
+  reused:
+    - 기존 typography와 vertical spacing token
+    - field component 자체 spacing
+  gap: 설정과 정보 섹션을 Card 없이 일관되게 묶을 pattern이 없다
+  rejected_alternatives:
+    - Card는 모든 섹션을 불필요한 표면으로 만든다
+  added:
+    - title와 description과 error와 content grouping
+  unchanged:
+    - 개별 field spacing은 field가 소유하는 원칙
+  feedback_questions:
+    - 섹션 간격과 제목 위계가 긴 설정 화면에 적절한가
+
+live-preview:
+  catalog: patterns
+  entry: live-preview
+  based_on_none_reason: form 결과를 옆에서 비추는 Stable layout pattern이 없다
+  reused:
+    - 기존 layout breakpoint와 surface token
+    - 기존 loading과 empty와 error components
+  gap: editor와 preview의 responsive 2-column 상태 구성을 반복해서 사용한다
+  rejected_alternatives:
+    - 화면별 grid는 sticky와 상태 표현을 중복 구현한다
+  added:
+    - ready와 loading과 empty와 error preview column
+  unchanged:
+    - form state는 부모가 소유하는 원칙
+  feedback_questions:
+    - 319px preview 폭과 1-column 전환 지점이 적절한가
+
+bottom-bar:
+  catalog: patterns
+  entry: bottom-bar
+  based_on:
+    - button
+  reused:
+    - Stable action controls
+    - 기존 layout inset과 content width token
+  gap: 페이지 전체 저장 행동과 상태를 하단에 일관되게 배치할 pattern이 없다
+  rejected_alternatives:
+    - 화면 본문 Button은 긴 편집 화면에서 행동 위치를 잃는다
+  added:
+    - full-bleed footer와 constrained inner action band
+  unchanged:
+    - loading은 Button disabled가 소유하는 원칙
+  feedback_questions:
+    - mobile 고정 여부와 배경 구분 강도가 적절한가
+
+empty-state:
+  catalog: patterns
+  entry: empty-state
+  based_on:
+    - button
+  reused:
+    - Stable primary action
+    - 기존 typography와 icon size와 spacing token
+  gap: 빈 목록과 검색 결과에서 설명과 다음 행동을 일관되게 제시할 pattern이 없다
+  rejected_alternatives:
+    - Alert는 문제나 정보를 알리지만 다음 행동 중심의 빈 상태가 아니다
+  added:
+    - optional icon과 description과 single action layout
+  unchanged:
+    - Button action contract와 semantic text hierarchy
+  feedback_questions:
+    - 최대 폭과 vertical spacing과 action 강조가 적절한가

package/dist/guide/catalog/icons.yml

@@ -0,0 +1,309 @@
+blank:
+  status: draft
+  source: icons/svg/blank.svg
+  figma: TODO
+
+search:
+  status: draft
+  source: icons/svg/search.svg
+  figma: TODO
+
+filter:
+  status: draft
+  source: icons/svg/filter.svg
+  figma: TODO
+
+info:
+  status: draft
+  source: icons/svg/info.svg
+  figma: TODO
+
+dashboard:
+  status: draft
+  source: icons/svg/dashboard.svg
+  figma: TODO
+
+close:
+  status: draft
+  source: icons/svg/close.svg
+  figma: TODO
+
+home:
+  status: draft
+  source: icons/svg/home.svg
+  figma: TODO
+
+report:
+  status: draft
+  source: icons/svg/report.svg
+  figma: TODO
+
+product:
+  status: draft
+  source: icons/svg/product.svg
+  figma: TODO
+
+chevron-up:
+  status: draft
+  source: icons/svg/chevron-up.svg
+  figma: TODO
+
+chevron-down:
+  status: draft
+  source: icons/svg/chevron-down.svg
+  figma: TODO
+
+chevron-left:
+  status: draft
+  source: icons/svg/chevron-left.svg
+  figma: TODO
+
+chevron-right:
+  status: draft
+  source: icons/svg/chevron-right.svg
+  figma: TODO
+
+arrow-right:
+  status: draft
+  source: icons/svg/arrow-right.svg
+  figma: TODO
+
+arrow-left:
+  status: draft
+  source: icons/svg/arrow-left.svg
+  figma: TODO
+
+person:
+  status: draft
+  source: icons/svg/person.svg
+  figma: TODO
+
+plus:
+  status: draft
+  source: icons/svg/plus.svg
+  figma: TODO
+
+check:
+  status: draft
+  source: icons/svg/check.svg
+  figma: TODO
+
+alert:
+  status: draft
+  source: icons/svg/alert.svg
+  figma: TODO
+
+alarm:
+  status: draft
+  source: icons/svg/alarm.svg
+  figma: TODO
+
+card:
+  status: draft
+  source: icons/svg/card.svg
+  figma: TODO
+
+history:
+  status: draft
+  source: icons/svg/history.svg
+  figma: TODO
+
+logout:
+  status: draft
+  source: icons/svg/logout.svg
+  figma: TODO
+
+external-link:
+  status: draft
+  source: icons/svg/external-link.svg
+  figma: TODO
+
+menu:
+  status: draft
+  source: icons/svg/menu.svg
+  figma: TODO
+
+help:
+  status: draft
+  source: icons/svg/help.svg
+  figma: TODO
+
+more-vertical:
+  status: draft
+  source: icons/svg/more-vertical.svg
+  figma: TODO
+
+refresh:
+  status: draft
+  source: icons/svg/refresh.svg
+  figma: TODO
+
+send:
+  status: draft
+  source: icons/svg/send.svg
+  figma: TODO
+
+pencil:
+  status: draft
+  source: icons/svg/pencil.svg
+  figma: TODO
+
+trash:
+  status: draft
+  source: icons/svg/trash.svg
+  figma: TODO
+
+upload:
+  status: draft
+  source: icons/svg/upload.svg
+  figma: TODO
+
+copy:
+  status: draft
+  source: icons/svg/copy.svg
+  figma: TODO
+
+link:
+  status: draft
+  source: icons/svg/link.svg
+  figma: TODO
+
+eye:
+  status: draft
+  source: icons/svg/eye.svg
+  figma: TODO
+
+eye-off:
+  status: draft
+  source: icons/svg/eye-off.svg
+  figma: TODO
+
+pause:
+  status: draft
+  source: icons/svg/pause.svg
+  figma: TODO
+
+camera:
+  status: draft
+  source: icons/svg/camera.svg
+  figma: TODO
+
+sliders:
+  status: draft
+  source: icons/svg/sliders.svg
+  figma: TODO
+
+type:
+  status: draft
+  source: icons/svg/type.svg
+  figma: TODO
+
+unplug:
+  status: draft
+  source: icons/svg/unplug.svg
+  figma: TODO
+
+store:
+  status: draft
+  source: icons/svg/store.svg
+  figma: TODO
+
+message:
+  status: draft
+  source: icons/svg/message.svg
+  figma: TODO
+
+smartphone:
+  status: draft
+  source: icons/svg/smartphone.svg
+  figma: TODO
+
+monitor:
+  status: draft
+  source: icons/svg/monitor.svg
+  figma: TODO
+
+phone:
+  status: draft
+  source: icons/svg/phone.svg
+  figma: TODO
+
+truck:
+  status: draft
+  source: icons/svg/truck.svg
+  figma: TODO
+
+image:
+  status: draft
+  source: icons/svg/image.svg
+  figma: TODO
+
+cable:
+  status: draft
+  source: icons/svg/cable.svg
+  figma: TODO
+
+mouse-pointer-click:
+  status: draft
+  source: icons/svg/mouse-pointer-click.svg
+  figma: TODO
+
+trending-up:
+  status: draft
+  source: icons/svg/trending-up.svg
+  figma: TODO
+
+lock:
+  status: draft
+  source: icons/svg/lock.svg
+  figma: TODO
+
+key:
+  status: draft
+  source: icons/svg/key.svg
+  figma: TODO
+
+shield-check:
+  status: draft
+  source: icons/svg/shield-check.svg
+  figma: TODO
+
+gift:
+  status: draft
+  source: icons/svg/gift.svg
+  figma: TODO
+
+star:
+  status: draft
+  source: icons/svg/star.svg
+  figma: TODO
+
+sparkles:
+  status: draft
+  source: icons/svg/sparkles.svg
+  figma: TODO
+
+thumbs-up:
+  status: draft
+  source: icons/svg/thumbs-up.svg
+  figma: TODO
+
+lightbulb:
+  status: draft
+  source: icons/svg/lightbulb.svg
+  figma: TODO
+
+timer:
+  status: draft
+  source: icons/svg/timer.svg
+  figma: TODO
+
+loading:
+  status: draft
+  source: icons/svg/loading.svg
+  figma: TODO
+
+success:
+  status: draft
+  source: icons/svg/success.svg
+  figma: TODO