atomsystem 0.1.47 → 0.1.49

package/tokens/token.json

@@ -0,0 +1,319 @@
+{
+  "$schema": "https://design-tokens.github.io/community-group/format/",
+  "name": "AtomDesignToken System",
+  "version": "0.1.49",
+  "color": {
+    "brand": {
+      "color-primary": {
+        "$value": "#3182f6",
+        "$type": "color",
+        "$description": "주요 액션 버튼, 활성 탭, 브랜드 강조 영역의 핵심 색상",
+        "variable": "--atom-color-primary"
+      },
+      "color-primary-hover": {
+        "$value": "#1b64da",
+        "$type": "color",
+        "$description": "Primary 컴포넌트에 마우스를 올렸을 때 적용되는 딥 톤",
+        "variable": "--atom-color-primary-hover"
+      },
+      "color-primary-subtle": {
+        "$value": "#e8f3ff",
+        "$type": "color",
+        "$description": "배지 배경, 활성 리스트 아이템, 선택 하이라이트 배경",
+        "variable": "--atom-color-primary-subtle"
+      }
+    },
+    "surface": {
+      "bg-primary": {
+        "$value": "#ffffff",
+        "$type": "color",
+        "$description": "웹 전체 페이지의 기본 캔버스 배경 (다크모드: #090a0f)",
+        "variable": "--atom-bg-primary"
+      },
+      "bg-surface": {
+        "$value": "#f8f9fa",
+        "$type": "color",
+        "$description": "카드, 모달 다이얼로그, 패널, 드롭다운 메뉴의 바탕색",
+        "variable": "--atom-bg-surface"
+      },
+      "bg-muted": {
+        "$value": "#f1f3f5",
+        "$type": "color",
+        "$description": "비활성화된 폼 필드, 태그 칩, 보조 영역 배경",
+        "variable": "--atom-bg-muted"
+      }
+    },
+    "text": {
+      "text-primary": {
+        "$value": "#191f28",
+        "$type": "color",
+        "$description": "가장 높은 명도 대비를 갖는 핵심 본문 및 헤드라인 텍스트",
+        "variable": "--atom-text-primary"
+      },
+      "text-secondary": {
+        "$value": "#8b95a1",
+        "$type": "color",
+        "$description": "설명문, 부가 라벨, 플레이스홀더, 서브 텍스트",
+        "variable": "--atom-text-secondary"
+      },
+      "text-muted": {
+        "$value": "#b0b8c1",
+        "$type": "color",
+        "$description": "타임스탬프, 비활성화된 라벨, 장식성 힌트 텍스트",
+        "variable": "--atom-text-muted"
+      }
+    },
+    "border": {
+      "border-subtle": {
+        "$value": "#f2f4f6",
+        "$type": "color",
+        "$description": "카드 구분선, 리스트 경계선 등 부드러운 분리선",
+        "variable": "--atom-border-subtle"
+      },
+      "border-strong": {
+        "$value": "#e5e8eb",
+        "$type": "color",
+        "$description": "인풋 필드 외곽선, 명확한 아웃라인 버튼, 모달 경계선",
+        "variable": "--atom-border-strong"
+      }
+    },
+    "status": {
+      "status-success": {
+        "$value": "#10b981",
+        "$type": "color",
+        "$description": "성공 완료 알림, 온라인 상태, 송금 완료 상태",
+        "variable": "--atom-status-success"
+      },
+      "status-danger": {
+        "$value": "#f43f5e",
+        "$type": "color",
+        "$description": "폼 유효성 에러, 경고 메시지, 삭제 등 파괴적 액션",
+        "variable": "--atom-status-danger"
+      },
+      "status-warning": {
+        "$value": "#f59e0b",
+        "$type": "color",
+        "$description": "주의 알림, 대기 중인 상태, 결제 보류",
+        "variable": "--atom-status-warning"
+      }
+    }
+  },
+  "typography": {
+    "--atom-font-display": {
+      "$value": {
+        "fontSize": "36px (2.25rem)",
+        "lineHeight": "1.25",
+        "fontWeight": "800 (ExtraBold)"
+      },
+      "$type": "typography",
+      "variable": "--atom-font-display",
+      "sample": "디자이너의 피그마 해방, 말로 디자인하는 시대"
+    },
+    "--atom-font-title-1": {
+      "$value": {
+        "fontSize": "28px (1.75rem)",
+        "lineHeight": "1.3",
+        "fontWeight": "700 (Bold)"
+      },
+      "$type": "typography",
+      "variable": "--atom-font-title-1",
+      "sample": "원클릭으로 끝내는 디자인 토큰 시스템"
+    },
+    "--atom-font-title-2": {
+      "$value": {
+        "fontSize": "20px (1.25rem)",
+        "lineHeight": "1.35",
+        "fontWeight": "700 (Bold)"
+      },
+      "$type": "typography",
+      "variable": "--atom-font-title-2",
+      "sample": "프레임워크 무관한 표준 CSS 변수 체계"
+    },
+    "--atom-font-title-3": {
+      "$value": {
+        "fontSize": "16px (1.0rem)",
+        "lineHeight": "1.4",
+        "fontWeight": "600 (SemiBold)"
+      },
+      "$type": "typography",
+      "variable": "--atom-font-title-3",
+      "sample": "계좌 송금 및 실시간 인증 패턴"
+    },
+    "--atom-font-body-1": {
+      "$value": {
+        "fontSize": "14px (0.875rem)",
+        "lineHeight": "1.5",
+        "fontWeight": "400 (Regular)"
+      },
+      "$type": "typography",
+      "variable": "--atom-font-body-1",
+      "sample": "React, Vue, 바닐라 HTML 어디서나 복사 한 번으로 즉시 렌더링됩니다."
+    },
+    "--atom-font-body-2": {
+      "$value": {
+        "fontSize": "12px (0.75rem)",
+        "lineHeight": "1.5",
+        "fontWeight": "500 (Medium)"
+      },
+      "$type": "typography",
+      "variable": "--atom-font-body-2",
+      "sample": "W3C DTCG 호환 tokens.json 기반 스타일 딕셔너리 컴파일"
+    },
+    "--atom-font-mono": {
+      "$value": {
+        "fontSize": "11px (0.6875rem)",
+        "lineHeight": "1.6",
+        "fontWeight": "500 (Medium)"
+      },
+      "$type": "typography",
+      "variable": "--atom-font-mono",
+      "sample": "npx atomsystem init --preset toss"
+    }
+  },
+  "radius": {
+    "none": {
+      "$value": "0px",
+      "$type": "dimension",
+      "$description": "단단한 테크니컬 대시보드 및 플랫 디자인",
+      "variable": "--atom-radius-none"
+    },
+    "sm": {
+      "$value": "6px",
+      "$type": "dimension",
+      "$description": "태그 배지, 미니 인풋, 정밀 데이터 테이블 컨트롤",
+      "variable": "--atom-radius-sm"
+    },
+    "md": {
+      "$value": "10px",
+      "$type": "dimension",
+      "$description": "일반적인 버튼, 인풋 필드, 툴팁",
+      "variable": "--atom-radius-md"
+    },
+    "lg": {
+      "$value": "16px",
+      "$type": "dimension",
+      "$description": "카드, 대화상자 모달, 주요 모바일 시트",
+      "variable": "--atom-radius-lg"
+    },
+    "xl": {
+      "$value": "24px",
+      "$type": "dimension",
+      "$description": "바텀시트 최상단 모서리, 히어로 배너 카드",
+      "variable": "--atom-radius-xl"
+    },
+    "full": {
+      "$value": "9999px",
+      "$type": "dimension",
+      "$description": "필터 칩, 플로팅 액션 버튼(FAB), 원형 아바타",
+      "variable": "--atom-radius-full"
+    }
+  },
+  "spacing": {
+    "1": {
+      "$value": "4px",
+      "$type": "dimension",
+      "px": 4,
+      "variable": "--atom-space-1"
+    },
+    "2": {
+      "$value": "8px",
+      "$type": "dimension",
+      "px": 8,
+      "variable": "--atom-space-2"
+    },
+    "3": {
+      "$value": "12px",
+      "$type": "dimension",
+      "px": 12,
+      "variable": "--atom-space-3"
+    },
+    "4": {
+      "$value": "16px",
+      "$type": "dimension",
+      "px": 16,
+      "variable": "--atom-space-4"
+    },
+    "5": {
+      "$value": "20px",
+      "$type": "dimension",
+      "px": 20,
+      "variable": "--atom-space-5"
+    },
+    "6": {
+      "$value": "24px",
+      "$type": "dimension",
+      "px": 24,
+      "variable": "--atom-space-6"
+    },
+    "8": {
+      "$value": "32px",
+      "$type": "dimension",
+      "px": 32,
+      "variable": "--atom-space-8"
+    },
+    "12": {
+      "$value": "48px",
+      "$type": "dimension",
+      "px": 48,
+      "variable": "--atom-space-12"
+    },
+    "16": {
+      "$value": "64px",
+      "$type": "dimension",
+      "px": 64,
+      "variable": "--atom-space-16"
+    }
+  },
+  "shadow": {
+    "sm": {
+      "$value": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+      "$type": "shadow",
+      "$description": "기본 카드, 인풋 포커스 상태, 미세한 구분",
+      "variable": "--atom-shadow-sm"
+    },
+    "md": {
+      "$value": "0 4px 6px -1px rgb(0 0 0 / 0.1)",
+      "$type": "shadow",
+      "$description": "호버된 카드, 드롭다운 메뉴, 팝오버 툴팁",
+      "variable": "--atom-shadow-md"
+    },
+    "lg": {
+      "$value": "0 10px 15px -3px rgb(0 0 0 / 0.1)",
+      "$type": "shadow",
+      "$description": "플로팅 내비게이션 바, 토스트 알림 메시지",
+      "variable": "--atom-shadow-lg"
+    },
+    "xl": {
+      "$value": "0 20px 25px -5px rgb(0 0 0 / 0.15)",
+      "$type": "shadow",
+      "$description": "화면 최상단 레이어의 모달 다이얼로그, 바텀시트",
+      "variable": "--atom-shadow-xl"
+    }
+  },
+  "presets": {
+    "toss": {
+      "name": "토스 스타일 (Toss)",
+      "brandColor": "#3182f6",
+      "radius": "16px",
+      "description": "Vivid Blue, 16px 볼드 라운딩, 시원한 여백과 극도의 미니멀리즘"
+    },
+    "daangn": {
+      "name": "당근 스타일 (Daangn)",
+      "brandColor": "#ff6f0f",
+      "radius": "12px",
+      "description": "Warm Orange, 12px 소프트 라운딩, 친근하고 따뜻한 커뮤니티 감성"
+    },
+    "hyper-violet": {
+      "name": "모던 바이올렛 (Violet Tech)",
+      "brandColor": "#7c3aed",
+      "radius": "8px",
+      "description": "세련된 보라색 테크 감성, 8px 샤프 라운딩, 개발자/B2B 최적화"
+    },
+    "forest-emerald": {
+      "name": "에코 에메랄드 (Emerald)",
+      "brandColor": "#10b981",
+      "radius": "14px",
+      "description": "자연스럽고 편안한 딥 그린, 핀테크 자산 및 웰니스 서비스용"
+    }
+  }
+}