@ncds/ui-admin-mcp 1.0.0-alpha.2

package/data/_meta.json

@@ -0,0 +1,12 @@
+{
+  "cdn": {
+    "version": "1.6",
+    "css": "https://fe-sdk.cdn-nhncommerce.com/@ncds/ui-admin/1.6/main.min.css",
+    "js": "https://fe-sdk.cdn-nhncommerce.com/@ncds/ui-admin/1.6/main.min.js"
+  },
+  "icon": {
+    "packageName": "@ncds/ui-admin-icon",
+    "version": "0.1",
+    "cdn": "https://fe-sdk.cdn-nhncommerce.com/@ncds/ui-admin-icon/0.1/main.min.js"
+  }
+}

package/data/_tokens.json

@@ -0,0 +1,661 @@
+{
+  "totalCount": 109,
+  "categories": [
+    "color",
+    "shadow",
+    "spacing",
+    "typography"
+  ],
+  "groups": [
+    {
+      "name": "primary-red",
+      "category": "color",
+      "description": "브랜드 Primary. 450이 CTA 기본색.",
+      "tokens": [
+        {
+          "name": "--primary-red-50",
+          "value": "#fffafd",
+          "description": ""
+        },
+        {
+          "name": "--primary-red-100",
+          "value": "#ffeaee",
+          "description": ""
+        },
+        {
+          "name": "--primary-red-200",
+          "value": "#fecbd2",
+          "description": ""
+        },
+        {
+          "name": "--primary-red-300",
+          "value": "#ff9fa5",
+          "description": ""
+        },
+        {
+          "name": "--primary-red-400",
+          "value": "#f86f76",
+          "description": ""
+        },
+        {
+          "name": "--primary-red-450",
+          "value": "#f7444e",
+          "description": "CTA 기본색"
+        },
+        {
+          "name": "--primary-red-500",
+          "value": "#ec1d31",
+          "description": ""
+        },
+        {
+          "name": "--primary-red-600",
+          "value": "#dc0a2b",
+          "description": ""
+        },
+        {
+          "name": "--primary-red-700",
+          "value": "#a60013",
+          "description": ""
+        }
+      ]
+    },
+    {
+      "name": "base",
+      "category": "color",
+      "description": "순수 White/Black.",
+      "tokens": [
+        {
+          "name": "--base-white",
+          "value": "#ffffff",
+          "description": ""
+        },
+        {
+          "name": "--base-black",
+          "value": "#000000",
+          "description": ""
+        }
+      ]
+    },
+    {
+      "name": "gray",
+      "category": "color",
+      "description": "중립색. 텍스트(700~500), 보더(200~300), 배경(50~100).",
+      "tokens": [
+        {
+          "name": "--gray-50",
+          "value": "#f6f7f9",
+          "description": "페이지 배경, Disabled 배경"
+        },
+        {
+          "name": "--gray-100",
+          "value": "#eaecf0",
+          "description": "Divider, Tab border, Table border"
+        },
+        {
+          "name": "--gray-200",
+          "value": "#d3d4d8",
+          "description": "Input border, 버튼 테두리"
+        },
+        {
+          "name": "--gray-300",
+          "value": "#a4a5a8",
+          "description": "Placeholder 텍스트"
+        },
+        {
+          "name": "--gray-400",
+          "value": "#757678",
+          "description": "Hint text, Focused border"
+        },
+        {
+          "name": "--gray-450",
+          "value": "#5e5e60",
+          "description": ""
+        },
+        {
+          "name": "--gray-500",
+          "value": "#464748",
+          "description": "Header 텍스트, Tab underline"
+        },
+        {
+          "name": "--gray-600",
+          "value": "#2f2f30",
+          "description": "Label 텍스트, Badge 텍스트"
+        },
+        {
+          "name": "--gray-700",
+          "value": "#171818",
+          "description": "입력 텍스트, Title, Body 텍스트"
+        }
+      ]
+    },
+    {
+      "name": "green",
+      "category": "color",
+      "description": "Success / 긍정 상태.",
+      "tokens": [
+        {
+          "name": "--green-50",
+          "value": "#f6fef9",
+          "description": ""
+        },
+        {
+          "name": "--green-100",
+          "value": "#d3f8df",
+          "description": ""
+        },
+        {
+          "name": "--green-200",
+          "value": "#aaf0c4",
+          "description": ""
+        },
+        {
+          "name": "--green-300",
+          "value": "#73e2a3",
+          "description": ""
+        },
+        {
+          "name": "--green-400",
+          "value": "#3ccb7f",
+          "description": ""
+        },
+        {
+          "name": "--green-500",
+          "value": "#099250",
+          "description": "Validation 성공 아이콘"
+        },
+        {
+          "name": "--green-600",
+          "value": "#087443",
+          "description": ""
+        },
+        {
+          "name": "--green-700",
+          "value": "#095c37",
+          "description": ""
+        }
+      ]
+    },
+    {
+      "name": "blue",
+      "category": "color",
+      "description": "Info / 링크 상태.",
+      "tokens": [
+        {
+          "name": "--blue-50",
+          "value": "#f5faff",
+          "description": ""
+        },
+        {
+          "name": "--blue-100",
+          "value": "#d1e9ff",
+          "description": ""
+        },
+        {
+          "name": "--blue-200",
+          "value": "#b2ddff",
+          "description": ""
+        },
+        {
+          "name": "--blue-300",
+          "value": "#84caff",
+          "description": ""
+        },
+        {
+          "name": "--blue-400",
+          "value": "#53b1fd",
+          "description": ""
+        },
+        {
+          "name": "--blue-500",
+          "value": "#1570ef",
+          "description": ""
+        },
+        {
+          "name": "--blue-600",
+          "value": "#1849a9",
+          "description": ""
+        },
+        {
+          "name": "--blue-700",
+          "value": "#194185",
+          "description": ""
+        }
+      ]
+    },
+    {
+      "name": "pink",
+      "category": "color",
+      "description": "Accent / 장식.",
+      "tokens": [
+        {
+          "name": "--pink-50",
+          "value": "#fef6fb",
+          "description": ""
+        },
+        {
+          "name": "--pink-100",
+          "value": "#fce7f6",
+          "description": ""
+        },
+        {
+          "name": "--pink-200",
+          "value": "#fcceee",
+          "description": ""
+        },
+        {
+          "name": "--pink-300",
+          "value": "#faa7e0",
+          "description": ""
+        },
+        {
+          "name": "--pink-400",
+          "value": "#f670c7",
+          "description": ""
+        },
+        {
+          "name": "--pink-500",
+          "value": "#dd2590",
+          "description": ""
+        },
+        {
+          "name": "--pink-600",
+          "value": "#c11574",
+          "description": ""
+        },
+        {
+          "name": "--pink-700",
+          "value": "#851651",
+          "description": ""
+        }
+      ]
+    },
+    {
+      "name": "orange",
+      "category": "color",
+      "description": "Warning / 경고 상태.",
+      "tokens": [
+        {
+          "name": "--orange-50",
+          "value": "#fefaf5",
+          "description": ""
+        },
+        {
+          "name": "--orange-100",
+          "value": "#fdead7",
+          "description": ""
+        },
+        {
+          "name": "--orange-200",
+          "value": "#f9dbaf",
+          "description": ""
+        },
+        {
+          "name": "--orange-300",
+          "value": "#f7b27a",
+          "description": ""
+        },
+        {
+          "name": "--orange-400",
+          "value": "#f38744",
+          "description": ""
+        },
+        {
+          "name": "--orange-500",
+          "value": "#e04f16",
+          "description": ""
+        },
+        {
+          "name": "--orange-600",
+          "value": "#b93815",
+          "description": ""
+        },
+        {
+          "name": "--orange-700",
+          "value": "#772917",
+          "description": ""
+        }
+      ]
+    },
+    {
+      "name": "violet",
+      "category": "color",
+      "description": "Accent / 장식 포인트.",
+      "tokens": [
+        {
+          "name": "--violet-50",
+          "value": "#fbfaff",
+          "description": ""
+        },
+        {
+          "name": "--violet-100",
+          "value": "#ece9fe",
+          "description": ""
+        },
+        {
+          "name": "--violet-200",
+          "value": "#ddd6fe",
+          "description": ""
+        },
+        {
+          "name": "--violet-300",
+          "value": "#c3b5fd",
+          "description": ""
+        },
+        {
+          "name": "--violet-400",
+          "value": "#a48afb",
+          "description": ""
+        },
+        {
+          "name": "--violet-500",
+          "value": "#6927da",
+          "description": ""
+        },
+        {
+          "name": "--violet-600",
+          "value": "#5720b7",
+          "description": ""
+        },
+        {
+          "name": "--violet-700",
+          "value": "#491c96",
+          "description": ""
+        }
+      ]
+    },
+    {
+      "name": "font-size",
+      "category": "typography",
+      "description": "폰트 크기 스케일. Caption(11px) ~ Display xl(60px).",
+      "tokens": [
+        {
+          "name": "--font-size-xxxs",
+          "value": "11px",
+          "description": "Caption — 최소 텍스트, 주석"
+        },
+        {
+          "name": "--font-size-xxs",
+          "value": "12px",
+          "description": "Text xxs — 보조 정보, 캡션"
+        },
+        {
+          "name": "--font-size-xs",
+          "value": "13px",
+          "description": "Text xs — 어드민 기본 본문"
+        },
+        {
+          "name": "--font-size-sm",
+          "value": "14px",
+          "description": "Text sm — 보조 본문, 레이블"
+        },
+        {
+          "name": "--font-size-md",
+          "value": "16px",
+          "description": "Text md — 강조 본문"
+        },
+        {
+          "name": "--font-size-lg",
+          "value": "18px",
+          "description": "Text lg — 대형 본문"
+        },
+        {
+          "name": "--font-size-xl",
+          "value": "20px",
+          "description": "Text xl — 강조 본문"
+        },
+        {
+          "name": "--font-size-display-xs",
+          "value": "24px",
+          "description": "Display xs — 소형 타이틀"
+        },
+        {
+          "name": "--font-size-display-sm",
+          "value": "30px",
+          "description": "Display sm — 중형 타이틀"
+        },
+        {
+          "name": "--font-size-display-md",
+          "value": "36px",
+          "description": "Display md — 섹션 타이틀"
+        },
+        {
+          "name": "--font-size-display-lg",
+          "value": "48px",
+          "description": "Display lg — 대형 타이틀"
+        },
+        {
+          "name": "--font-size-display-xl",
+          "value": "60px",
+          "description": "Display xl — 최상위 헤딩"
+        }
+      ]
+    },
+    {
+      "name": "line-heights",
+      "category": "typography",
+      "description": "줄 간격. font-size와 매칭하여 사용.",
+      "tokens": [
+        {
+          "name": "--line-heights-xxxs",
+          "value": "14px",
+          "description": "Caption (11px 매칭)"
+        },
+        {
+          "name": "--line-heights-xxs",
+          "value": "16px",
+          "description": "Text xxs (12px 매칭)"
+        },
+        {
+          "name": "--line-heights-xs",
+          "value": "18px",
+          "description": "Text xs (13px 매칭)"
+        },
+        {
+          "name": "--line-heights-sm",
+          "value": "22px",
+          "description": "Text sm (14px 매칭)"
+        },
+        {
+          "name": "--line-heights-md",
+          "value": "24px",
+          "description": "Text md (16px 매칭)"
+        },
+        {
+          "name": "--line-heights-lg",
+          "value": "28px",
+          "description": "Text lg (18px 매칭)"
+        },
+        {
+          "name": "--line-heights-xl",
+          "value": "30px",
+          "description": "Text xl (20px 매칭)"
+        },
+        {
+          "name": "--line-heights-display-xs",
+          "value": "32px",
+          "description": "Display xs (24px 매칭)"
+        },
+        {
+          "name": "--line-heights-display-sm",
+          "value": "38px",
+          "description": "Display sm (30px 매칭)"
+        },
+        {
+          "name": "--line-heights-display-md",
+          "value": "46px",
+          "description": "Display md (36px 매칭)"
+        },
+        {
+          "name": "--line-heights-display-lg",
+          "value": "60px",
+          "description": "Display lg (48px 매칭)"
+        },
+        {
+          "name": "--line-heights-display-xl",
+          "value": "76px",
+          "description": "Display xl (60px 매칭)"
+        }
+      ]
+    },
+    {
+      "name": "font-weights-commerce-sans",
+      "category": "typography",
+      "description": "글자 굵기. 3단계.",
+      "tokens": [
+        {
+          "name": "--font-weights-commerce-sans-0",
+          "value": "400",
+          "description": "Regular — 기본 본문"
+        },
+        {
+          "name": "--font-weights-commerce-sans-1",
+          "value": "500",
+          "description": "Medium — 레이블, 강조"
+        },
+        {
+          "name": "--font-weights-commerce-sans-2",
+          "value": "700",
+          "description": "Bold — 타이틀, 액션"
+        }
+      ]
+    },
+    {
+      "name": "spacing",
+      "category": "spacing",
+      "description": "DES-SPEC-005 — 여백 토큰 6단계. 블록 내부 < 블록 간 여백 원칙.",
+      "tokens": [
+        {
+          "name": "--spacing-xs",
+          "value": "4px",
+          "description": "블록 내부 최소 간격"
+        },
+        {
+          "name": "--spacing-s",
+          "value": "8px",
+          "description": "블록 내부 요소 간"
+        },
+        {
+          "name": "--spacing-m",
+          "value": "16px",
+          "description": "블록 내부 그룹 간 / 블록 간 여백"
+        },
+        {
+          "name": "--spacing-l",
+          "value": "24px",
+          "description": "블록 내부 그룹 간 / 페이지 상단 패딩"
+        },
+        {
+          "name": "--spacing-xl",
+          "value": "32px",
+          "description": "대형 간격"
+        },
+        {
+          "name": "--spacing-xxl",
+          "value": "40px",
+          "description": "페이지 좌우 패딩"
+        }
+      ]
+    },
+    {
+      "name": "shadow-elevation",
+      "category": "shadow",
+      "description": "기본 Elevation. 내부 요소는 외부 요소보다 낮은 단계를 사용.",
+      "tokens": [
+        {
+          "name": "--shadow-elevation-xs",
+          "value": "0 1px 2px 0 rgba(16, 24, 40, 0.05)",
+          "description": "내부 카드, 버튼, Input"
+        },
+        {
+          "name": "--shadow-elevation-sm",
+          "value": "0 1px 3px 0 rgba(16, 24, 40, 0.10), 0 1px 2px 0 rgba(16, 24, 40, 0.06)",
+          "description": "Block Container, PageTitle"
+        },
+        {
+          "name": "--shadow-elevation-md",
+          "value": "0 4px 8px -2px rgba(16, 24, 40, 0.10), 0 2px 4px -2px rgba(16, 24, 40, 0.06)",
+          "description": "드래그 중, 플로팅"
+        },
+        {
+          "name": "--shadow-elevation-lg",
+          "value": "0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03)",
+          "description": "Dropdown 오버레이"
+        },
+        {
+          "name": "--shadow-elevation-xl",
+          "value": "0 20px 24px -4px rgba(16, 24, 40, 0.08), 0 8px 8px -4px rgba(16, 24, 40, 0.03)",
+          "description": ""
+        },
+        {
+          "name": "--shadow-elevation-2xl",
+          "value": "0 24px 48px -12px rgba(16, 24, 40, 0.18)",
+          "description": ""
+        },
+        {
+          "name": "--shadow-elevation-3xl",
+          "value": "0 32px 64px -12px rgba(16, 24, 40, 0.14)",
+          "description": ""
+        }
+      ]
+    },
+    {
+      "name": "shadow-focus-ring",
+      "category": "shadow",
+      "description": "Focus 상태 외곽선. outline 대신 box-shadow로 구현.",
+      "tokens": [
+        {
+          "name": "--shadow-focus-ring-primary-100",
+          "value": "0 0 0 3px rgba(255, 234, 238, 1)",
+          "description": "Primary 계열 포커스"
+        },
+        {
+          "name": "--shadow-focus-ring-gray-100",
+          "value": "0 0 0 3px rgba(242, 244, 247, 1)",
+          "description": "Neutral 계열 포커스"
+        },
+        {
+          "name": "--shadow-focus-ring-error-100",
+          "value": "0 0 0 3px rgba(254, 228, 226, 1)",
+          "description": "Error/Destructive 포커스"
+        }
+      ]
+    },
+    {
+      "name": "shadow-focused",
+      "category": "shadow",
+      "description": "기본 Elevation + Focus Ring 결합. Focused 상태 전용.",
+      "tokens": [
+        {
+          "name": "--shadow-focused-xs-primary-100",
+          "value": "0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 3px rgba(255, 234, 238, 1)",
+          "description": "Input Primary Focused"
+        },
+        {
+          "name": "--shadow-focused-xs-gray-100",
+          "value": "0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 3px rgba(242, 244, 247, 1)",
+          "description": "Input Focused"
+        },
+        {
+          "name": "--shadow-focused-xs-error-100",
+          "value": "0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 3px rgba(254, 228, 226, 1)",
+          "description": "Input Error+Focused"
+        },
+        {
+          "name": "--shadow-focused-sm-primary-100",
+          "value": "0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(255, 234, 238, 1)",
+          "description": "Button Primary Focused"
+        },
+        {
+          "name": "--shadow-focused-sm-gray-100",
+          "value": "0 1px 3px 0 rgba(16, 24, 40, 0.10), 0 1px 2px 0 rgba(16, 24, 40, 0.06), 0 0 0 4px rgba(242, 244, 247, 1)",
+          "description": "Button Secondary Focused"
+        },
+        {
+          "name": "--shadow-focused-sm-error-100",
+          "value": "0 0 0 4px rgba(254, 228, 226, 1), 0 1px 2px 0 rgba(16, 24, 40, 0.05)",
+          "description": "Button Destructive Focused"
+        }
+      ]
+    }
+  ]
+}