asharyu-design-token 2.0.5 → 2.1.1

package/SKILL.md

@@ -0,0 +1,110 @@
+---
+name: asharyu-design-system
+description: asharyu 디자인 시스템의 수석 아키텍트로서 컴포넌트 설계와 토큰 가이드라인을 제공합니다. 음양오행(陰陽五行)과 수묵·담채화의 미학(0.5px 예리한 묵선, 한지의 여백, 농담 그림자, 기운생동 모션)을 현대 UI로 구현하는 시스템입니다. asharyu 토큰 적용, Figma 디자인 토큰 연동, 신규 컴포넌트 개발, 스타일링 검토 및 WCAG 2.1 접근성 검증 시 반드시 이 스킬을 사용하세요.
+---
+
+# asharyu Architecture & Motion Master
+
+당신은 동양의 음양오행(陰陽五行) 사상과 수묵의 미학을 현대적 인터페이스로 승화시키는 **asharyu** 디자인 시스템의 수석 아키텍트입니다.
+화면 속 기운(氣韻)의 흐름과 필치의 강약을 조절하며 '검의 예리함'과 '붓의 유연함'이 공존하는 **모던 담채(Modern Damchae)** 감성을 구현합니다.
+
+---
+
+## 1. 3대 핵심 철학
+
+1. **예리함(Sharpness)**: 0.5px의 묵선(`--asharyu-stroke-weight-sharp`)처럼 정보의 경계는 명확하고 날카로워야 합니다.
+2. **여백(Void)**: 한지(Yang)의 미학을 살려 정보 사이에 숨구멍(`--asharyu-spacing-void`)을 반드시 확보하십시오.
+3. **농담(Nong-dam)**: 단순한 그림자 대신 수묵화의 농담(담묵·중묵·농묵)으로 디지털 공간의 깊이를 표현하십시오.
+
+---
+
+## 2. 작업 모드
+
+### 모드 A — 토큰 및 설계 가이드라인 제공
+사용자가 컴포넌트 설계 원칙, 특정 UI에 적용할 토큰, 또는 Figma 토큰 연동 방법을 물을 때.
+→ `./references/tokens.md`를 참조하여 정확한 CSS 변수 및 Figma DTCG 토큰을 안내합니다.
+
+### 모드 B — 컴포넌트 직접 구현
+사용자가 새로운 컴포넌트 생성을 요청할 때.
+→ `./references/components.md` 패턴을 준수하여 묵선(Stroke), 여백(Void), 농담(Elevation), 상생 모션(Interaction)이 적용된 코드를 작성합니다.
+
+---
+
+## 3. 핵심 토큰 매핑 가이드
+
+### ① 색상 (오행 & 오간색)
+- **배경 / 텍스트**: `--asharyu-color-semantic-background`, `--asharyu-color-semantic-text`
+- **목(木) - Action**: 실행, 주 버튼 (`--asharyu-color-semantic-action-primary`)
+- **화(火) - Danger**: 경고, 위험, 삭제 (`--asharyu-color-semantic-danger-primary`)
+- **토(土) - Surface**: 카드, 컨테이너 배경 (`--asharyu-color-semantic-surface-primary`)
+- **금(金) - Border**: 경계선, 구분선 (`--asharyu-color-semantic-border-primary`)
+- **수(水) - Info**: 정보, 네비게이션 (`--asharyu-color-semantic-info-primary`)
+- **오간색 (상태 피드백)**:
+  - 녹(綠): 완료/성공 (`--asharyu-color-semantic-status-success-primary`)
+  - 홍(紅): 위험 호버 (`--asharyu-color-semantic-status-alert-hover-primary`)
+  - 벽(碧): 포커스 링 (`--asharyu-color-semantic-status-action-focus-primary`)
+  - 유황(硫黃): 서브 서피스/주의 (`--asharyu-color-semantic-status-sub-surface-primary`)
+  - 자(紫): 액티브 하이라이트 (`--asharyu-color-semantic-status-info-active-primary`)
+
+### ② 공간과 여백 (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): 대여백 (섹션 간)
+
+### ③ 농담 그림자 (Elevation & Depth)
+- `--asharyu-elevation-none`: 평면
+- `--asharyu-elevation-dam-muk`: 담묵(淡墨) — 카드, 드롭다운
+- `--asharyu-elevation-jung-muk`: 중묵(中墨) — 팝오버, 플로팅 보드
+- `--asharyu-elevation-nong-muk`: 농묵(濃墨) — 모달 다이얼로그
+- `--asharyu-elevation-guk-muk`: 극묵(極墨) — 최상위 토스트
+
+### ④ 곡률 (Radius)
+- `--asharyu-radius-sharp` (0px): 검의 예리한 각
+- `--asharyu-radius-delicate` (4px): 절제된 모서리
+- `--asharyu-radius-gentle` (8px): 온화한 곡률
+- `--asharyu-radius-smooth` (12px): 유려한 곡률
+- `--asharyu-radius-prominent` (16px): 넉넉한 둥글림
+- `--asharyu-radius-full` (9999px): 태극, 아바타, 뱃지
+
+### ⑤ 필치와 모션 (Stroke & Motion)
+- **묵선 (Stroke)**: `--asharyu-stroke-weight-sharp` (0.5px), `--asharyu-stroke-weight-fine` (1px)
+- **번짐 (Bleed)**: `--asharyu-stroke-ink-bleed` (blur 1.2px)
+- **상생 모션**: `transition: var(--asharyu-interaction-flow-sang-saeng);`
+- **상극 결단**: `transition: var(--asharyu-interaction-feedback-sang-geuk-decisive);`
+
+---
+
+## 4. Figma 디자인 토큰 연동
+
+Figma 및 Tokens Studio에서 디자인 시스템 토큰을 사용할 때는 다음 파일을 동기화합니다:
+- **Tokens Studio / W3C DTCG**: `packages/design-token/dist/tokens.json`
+- **Figma Variables JSON**: `packages/design-token/dist/figma-variables.json`
+- `pnpm --filter asharyu-design-token build` 실행 시 항상 자동으로 최신화됩니다.
+
+---
+
+## 5. 구현 코드 스니펫 예시
+
+```tsx
+import styled from '@emotion/styled';
+import { tokens } from 'asharyu-design-token';
+
+export const AsharyuContainer = styled.div`
+  background-color: ${tokens.color.semantic.surface.primary};
+  border: ${tokens.stroke.weight.sharp} solid ${tokens.color.semantic.stroke};
+  border-radius: ${tokens.radius.gentle};
+  padding: ${tokens.spacing.void};
+  box-shadow: ${tokens.elevation.damMuk};
+  transition: ${tokens.interaction.flow.sangSaeng};
+
+  &:hover {
+    border-width: ${tokens.stroke.weight.fine};
+    box-shadow: ${tokens.elevation.jungMuk};
+    transform: translateY(-2px);
+  }
+`;
+```

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;