@hjmds/design-contracts 1.50.0 → 3.0.0

package/docs/usage/components/tag.md

@@ -42,7 +42,7 @@ import { Tag } from "@hjmds/react/display";
 // Native
 import { Tag } from "@hjmds/react-native/data-display";
 
-<Tag layoutStyle={{ marginTop: 4 }}>{t("player.position.leftField")}</Tag>
+<Tag variant="outline" layoutStyle={{ marginTop: 4 }}>{t("player.position.leftField")}</Tag>
 ```
 
 ## 축과 기본값
@@ -51,20 +51,23 @@ import { Tag } from "@hjmds/react-native/data-display";
 | --- | --- | --- | --- |
 | `children` | 문자열 | — (필수) | 문자열만 받는다. 비어 있으면 `TypeError` |
 | `tone` | `neutral` · `info` · `success` · `attention` · `brand` | `neutral` | `warning`·`danger`는 없다(이유는 계약 문서) |
+| `variant` | `default` · `outline` | `outline` | outline은 배경 없는 테두리형 캡슐 |
 | `layoutStyle` | `HjmCompositionStyleProp` | — | 바깥 여백·`alignSelf` 같은 배치. Web·Native 모두 |
 | `accessibilityLabel`(Native) | `string` | 라벨 | — |
 | `style`·`labelStyle`(Native) | 지원하지 않음 | — | 제거된 속성 — `layoutStyle` 또는 `tone`. 현재 공개 props에서 제거되었다 |
 
-모양은 radius `sm` 사각형, 최소 높이 20(큰 글자에서 늘어남), caption 크기 medium(500) 글자다.
+작은 사각형은 명시적인 `variant="default"`, 최소 높이 20, caption medium(500)이다.
+기본 `variant="outline"`은 투명 배경, radius `full`, 최소 높이 32, 좌우 10·상하 6, caption regular(400)이다.
+프로필의 긴 사실 정보처럼 배경 채움 없이 나열할 때 쓴다. neutral 글자는 `content.primary`를 따른다.
 
 ## 배치
 
-Native의 모서리는 Provider의 `tokens.radius.sm`이다. metadata 의미와 tone은 변하지 않는다.
+Native 기본 모서리는 `tokens.radius.full`, 명시적인 default 변형은 `tokens.radius.sm`이다. metadata 의미와 tone은 변하지 않는다.
 
 | 항목 | 값 | 근거 |
 | --- | --- | --- |
-| 크기 | 최소 높이 20, 테두리 1, radius `sm` 8. 누르는 대상이 아니므로 44 터치 영역을 두지 않는다 | `tagRecipe.size`, `styles.css` `.hjm-tag`, `react-native/src/data-display.tsx` |
-| 간격 | 좌우 여백 `spacing.xxs` 4. 제목 옆이면 간격 `spacing.xs` 8, 여러 개는 가로로 `spacing.xxs` 4~`xs` 8 | `tagRecipe.size` |
+| 크기 | 기본 최소 높이 32, 테두리 1, radius `full` 999. 누르는 대상이 아니므로 44 터치 영역을 두지 않는다 | `tagRecipe.size`, `styles.css` `.hjm-tag`, `react-native/src/data-display.tsx` |
+| 간격 | 기본 안쪽 여백 좌우 10·상하 6. 제목 옆이면 간격 `spacing.xs` 8, 여러 개는 가로로 `spacing.xxs` 4~`xs` 8 | `tagRecipe.size` |
 | 순서·정렬 | 제목·행 옆에 붙는 작은 메타 표시다. 제목 옆이면 제목과 세로 가운데 정렬한다 | — |
 | 고정·스크롤 | — | — |
 | 좁은 폭·큰 글자 | 여러 개는 줄바꿈(`wrap`)한다. 큰 글자에서는 높이가 글자에 맞춰 늘어난다(고정 높이 금지) | `tagRecipe.size.minHeight` 주석 |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hjmds/design-contracts",
-  "version": "1.50.0",
+  "version": "3.0.0",
   "description": "Renderer-neutral design contracts, tokens, recipes, and behaviors shared by HJM products.",
   "license": "MIT",
   "repository": {