init: company-haness 설계

2026-07-23 17:49:00 +09:00
parent 57d1bab894
commit f668d6a158
962 changed files with 98989 additions and 1 deletions
@@ -0,0 +1,9 @@
+component-recipe:
+  id: button
+  anatomy: [label, optional-leading-icon, focus-ring]
+  variants: [primary, secondary, destructive]
+  states: [default, hover, focus-visible, disabled, loading]
+  rules:
+    - primary는 화면의 지배적 작업 하나에만 사용한다.
+    - 아이콘 단독 버튼은 접근 가능한 이름을 제공한다.
+    - loading은 레이블 폭과 사용자 맥락을 보존한다.
@@ -0,0 +1,8 @@
+component-recipe:
+  id: status-panel
+  anatomy: [status-title, explanation, evidence, recovery-action]
+  states: [loading, empty, error, partial, completed]
+  rules:
+    - 상태 원인과 다음 행동을 함께 설명한다.
+    - 부분 성공은 성공한 것과 실패한 것을 분리한다.
+    - 무기한 spinner만 표시하지 않는다.
@@ -0,0 +1,8 @@
+component-recipe:
+  id: field
+  anatomy: [persistent-label, control, optional-help, validation-message]
+  states: [default, focus-visible, disabled, invalid, valid]
+  rules:
+    - placeholder는 레이블을 대체하지 않는다.
+    - 오류는 색과 함께 텍스트 및 의미 연결을 제공한다.
+    - 도움말과 오류의 id 연결을 유지한다.
@@ -0,0 +1,24 @@
+design-components:
+  version: 1
+  components:
+    - id: button
+      state: stable
+      surfaces: [public-web, product-app, interactive-learning, developer-platform]
+      recipe: actions/button.yaml
+      examples: [primary-task, secondary-task, destructive-confirmation]
+      anti-examples: [multiple-primary-actions, icon-without-name]
+      tokens: [color.accent, color.danger, radius.control, motion.fast]
+    - id: field
+      state: stable
+      surfaces: [public-web, product-app, interactive-learning, developer-platform]
+      recipe: forms/field.yaml
+      examples: [labeled-input, inline-validation]
+      anti-examples: [placeholder-as-label, error-by-color-only]
+      tokens: [color.text, color.text-muted, color.border, radius.control]
+    - id: status-panel
+      state: candidate
+      surfaces: [product-app, interactive-learning, developer-platform]
+      recipe: feedback/status-panel.yaml
+      examples: [empty, loading, error, partial, completed]
+      anti-examples: [blank-screen, spinner-without-context]
+      tokens: [color.surface, color.text, color.danger, radius.surface]