asharyu-design-token 2.0.4 → 2.1.0

package/SKILL.md

@@ -0,0 +1,91 @@
+🖋️ asharyu Design System Prompt Guide
+
+1. Persona & Tone
+   당신은 asharyu 시스템의 아키텍트입니다. 모든 UI 설계 시 다음의 태도를 견지하십시오:
+
+- 예리함(Sharpness): 0.5px의 묵선처럼 정보의 경계는 명확해야 합니다.
+- 여백(Void): 한지(Yang)의 미학을 살려 정보 사이의 숨구멍을 확보하십시오 (`--asharyu-spacing-void`).
+- 기운(Energy): 단순한 색상 변경이 아닌, 오행의 상생/상극 논리에 따른 '흐름'을 설계하십시오.
+
+2. Color Semantic Mapping (오행 & 오간색)
+   Raw Color(--asharyu-color-raw-*)를 직접 사용하지 말고, 반드시 Semantic Token을 사용하십시오.
+
+| 기운 (Element) | 기능 (Function) | Semantic Token Prefix |
+| :--- | :--- | :--- |
+| 양/음 (Theme) | 배경 및 기본 텍스트 | `--asharyu-color-semantic-background`, `-text` |
+| **오행 (五行)** | **Primary Action & Surface** | |
+| 목 (木, Wood) | Action: 실행, 버튼, 링크 | `--asharyu-color-semantic-action-primary` |
+| 화 (火, Fire) | Danger: 경고, 파괴적 액션 | `--asharyu-color-semantic-danger-primary` |
+| 토 (土, Earth) | Surface: 컨테이너, 카드 배경 | `--asharyu-color-semantic-surface-primary` |
+| 금 (金, Metal) | Border: 경계선, 구분선 | `--asharyu-color-semantic-border-primary` |
+| 수 (水, Water) | Info: 보조 정보, 네비게이션 | `--asharyu-color-semantic-info-primary` |
+| **오간색 (五間色)** | **Secondary Status & Feedback** | |
+| 녹 (綠, Nok) | Success: 완료, 안전 (목+토) | `--asharyu-color-semantic-status-success-primary` |
+| 홍 (紅, Hong) | Alert: 경고 상태 피드백 (화+금) | `--asharyu-color-semantic-status-alert-hover-primary` |
+| 벽 (碧, Byeok) | Focus: 선택 및 강조 단계 (목+금) | `--asharyu-color-semantic-status-action-focus-primary` |
+| 유황 (硫黃, Yu) | Warning: 주의 및 지연 (토+수) | `--asharyu-color-semantic-status-sub-surface-primary` |
+| 자 (紫, Ja) | Special: 발견 및 하이라이트 (화+수) | `--asharyu-color-semantic-status-info-active-primary` |
+
+3. Spacing & Void (여백의 미학)
+   패딩이나 마진에 임의의 픽셀 대신 여백 토큰을 사용하십시오:
+   - `--asharyu-spacing-compact` (4px / 0.25rem): 찰나, 아이콘/인라인 간격
+   - `--asharyu-spacing-fine` (8px / 0.5rem): 세목, 컴팩트한 간격
+   - `--asharyu-spacing-moderate` (12px / 0.75rem): 근거리, 리스트 간격
+   - `--asharyu-spacing-base` (16px / 1rem): 평상, 기본 패딩
+   - `--asharyu-spacing-void` (24px / 1.5rem): 여백, 한지의 숨구멍 (표준 컴포넌트 여백)
+   - `--asharyu-spacing-wide` (32px / 2rem): 심원, 섹션 그룹 여백
+   - `--asharyu-spacing-spacious` (48px / 3rem): 대여백, 주요 구획 여백
+   - `--asharyu-spacing-vast` (64px / 4rem): 광막, 페이지 레벨 여백
+
+4. Elevation & Depth (농담 濃淡의 미학)
+   수묵화의 농담처럼 빛과 먹빛의 스며듦을 통해 깊이감을 표현합니다.
+   - `--asharyu-elevation-none`: 평면
+   - `--asharyu-elevation-dam-muk`: 담묵(淡墨), 카드 호버 및 드롭다운
+   - `--asharyu-elevation-jung-muk`: 중묵(中墨), 팝오버 및 플로팅 보드
+   - `--asharyu-elevation-nong-muk`: 농묵(濃墨), 모달 다이얼로그
+   - `--asharyu-elevation-guk-muk`: 극묵(極墨), 최상위 토스트 및 중요 알림
+
+5. Radius & Stroke (곡률과 필치)
+   - Radius: `--asharyu-radius-sharp` (0px), `--asharyu-radius-delicate` (4px), `--asharyu-radius-gentle` (8px), `--asharyu-radius-smooth` (12px), `--asharyu-radius-full` (9999px)
+   - Border: 기본 경계는 `--asharyu-stroke-weight-sharp`(0.5px)를 사용하여 예리한 묵선을 표현합니다.
+   - Bleed (번짐): 강한 인공 그림자 대신 `--asharyu-stroke-ink-bleed`(blur 1.2px)와 시맨틱 bleed 토큰을 조합합니다.
+   - Pressure: 상호작용 강도에 따라 `--asharyu-stroke-ink-pressure-light`에서 `heavy`로 선 굵기를 변화시켜 필압을 표현합니다.
+
+6. Typography (서체와 필압)
+   - Family: `--asharyu-font-family-serif` (명조/바탕 - 헤드라인), `--asharyu-font-family-sans` (고딕 - 본문), `--asharyu-font-family-mono` (코드)
+   - Weight: `--asharyu-font-weight-light` (300/담), `--asharyu-font-weight-regular` (400/상), `--asharyu-font-weight-semibold` (600/농), `--asharyu-font-weight-bold` (700/필)
+   - Line-Height: `--asharyu-font-line-height-tight` (1.25), `--asharyu-font-line-height-normal` (1.5), `--asharyu-font-line-height-relaxed` (1.75)
+
+7. Motion Principles (기운생동)
+   - 상생(相生) Flow: 일반적인 상태 변화나 이동 시 `--asharyu-motion-ki-un-gentle`을 사용하여 부드럽게 연결합니다.
+   - 상극(相剋) Feedback: 오류나 강한 거부 반응 시 `--asharyu-motion-ki-un-sharp`를 사용하여 튕겨 나가는 듯한 예리한 대비를 줍니다.
+   - 담채 Diffusion: 정보가 나타날 때 `--asharyu-motion-ki-un-spread`와 `--asharyu-motion-duration-bleed`를 사용하여 물감이 퍼지듯 노출합니다.
+
+8. Implementation Code Snippet Example
+   새로운 컴포넌트를 정의할 때 아래 형식을 따르십시오:
+
+```js
+// asharyu 스타일의 카드 컴포넌트 예시
+const AsharyuCard = styled.div`
+  background-color: var(--asharyu-color-semantic-surface-subtle);
+  border: var(--asharyu-stroke-weight-sharp) solid
+    var(--asharyu-color-semantic-stroke);
+  border-radius: var(--asharyu-radius-gentle);
+  padding: var(--asharyu-spacing-void);
+  box-shadow: var(--asharyu-elevation-dam-muk);
+  transition: var(--asharyu-interaction-flow-sang-saeng);
+
+  &:hover {
+    border-width: var(--asharyu-stroke-ink-pressure-heavy);
+    box-shadow: var(--asharyu-elevation-jung-muk);
+    transform: translateY(-2px);
+  }
+`;
+```
+
+9. Checklist for Review
+   - 음양 조화: 라이트/다크 모드에서 background와 text의 대비가 WCAG 2.1 AAA(7:1)를 만족하는가?
+   - 오행 준수: 버튼에 '화(火)'의 색상을 쓰고 있지는 않은가? (Action은 반드시 '목(木)' 계열 사용)
+   - 필압 확인: 경계선이 너무 뭉툭하지 않은가? (0.5px~1px 권장)
+   - 여백 확인: 임의의 픽셀 대신 `--asharyu-spacing-void` 토큰을 사용하였는가?
+   - 기운 생동: 모든 애니메이션에 ki-un 베지어 곡선이 적용되었는가?

package/dist/{src/color → color}/semanticValue.d.ts

@@ -2,7 +2,7 @@
  * Asharyu Design System - Semantic Color Tokens
  * 음양의 반전과 오행의 기운을 담은 테마별 시맨틱 정의입니다.
  */
-interface ThemeTokens {
+export interface ThemeTokens {
     /** 5단계 색상 계층 구조 */
     readonly scale: {
         readonly subtle: string;

package/dist/elevation/index.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Asharyu Design System - Elevation & Depth Tokens
+ * 농담(濃淡)의 미학: 수묵의 농도와 번짐을 통해 디지털 공간의 깊이감을 표현합니다.
+ * 하드코딩된 그림자 대신 시맨틱 bleed 토큰을 활용하여 음양(다크/라이트) 모드에 자연스럽게 감응합니다.
+ */
+export declare const elevation: Readonly<{
+    /** 평면: 높이 없음 */
+    none: "none";
+    /** 담묵(淡墨): 은은하게 스며드는 엷은 먹빛, 카드 및 상호작용 표면 */
+    damMuk: "0 1px 3px var(--asharyu-color-semantic-bleed-soft), 0 2px 8px var(--asharyu-color-semantic-bleed-primary)";
+    /** 중묵(中墨): 적당한 깊이의 먹빛, 드롭다운 메뉴 및 보드 컨테이너 */
+    jungMuk: "0 4px 16px var(--asharyu-color-semantic-bleed-primary), 0 2px 4px var(--asharyu-color-semantic-bleed-soft)";
+    /** 농묵(濃墨): 짙고 묵직한 먹빛, 팝오버 및 모달 다이얼로그 */
+    nongMuk: "0 12px 32px var(--asharyu-color-semantic-bleed-primary), 0 4px 12px var(--asharyu-color-semantic-bleed-soft)";
+    /** 극묵(極墨): 가장 깊고 강렬한 먹빛, 플로팅 토스트 및 중요 알림창 */
+    gukMuk: "0 20px 48px var(--asharyu-color-semantic-bleed-primary), 0 8px 16px var(--asharyu-color-semantic-bleed-soft)";
+}>;
+export type ElevationType = typeof elevation;
+export default elevation;