@tide-tds/components 0.5.1 → 0.7.0

package/dist/Accordion.js

@@ -19,7 +19,7 @@ const accordionClass = "rounded-lg border border-default text-default";
 const itemClass = "not-first:border-t not-first:border-default";
 const triggerClass = [
 	"group flex flex-1 cursor-pointer items-center gap-3 rounded-md px-4 py-3 text-start text-label-lg outline-none select-none",
-	"enabled:hover:bg-neutral-subtle-hover focus-visible:focus-ring",
+	"enabled:hover:bg-hover focus-visible:focus-ring",
 	"disabled:cursor-not-allowed disabled:text-disabled"
 ].join(" ");
 const chevronClass = "ms-auto shrink-0 text-muted group-hover:group-enabled:text-default group-disabled:text-disabled group-aria-expanded:rotate-180 motion-safe:transition-[rotate] forced-colors:text-current forced-colors:group-disabled:text-current";

package/dist/Alert.js

@@ -1,4 +1,4 @@
-import { alertCloseClass, alertContentClass, alertDescriptionClass, alertIconClass, alertLayoutClass, alertStatusIcon, alertSurfaceClass, alertTitleClass } from "./alert-style.js";
+import { alertCloseClass, alertContentClass, alertDescriptionClass, alertIconClass, alertLayoutClass, alertStatusIcon, alertSubtleCloseClass, alertSurfaceClass, alertTitleClass } from "./alert-style.js";
 import { cn } from "./cn.js";
 import { IconButton } from "./IconButton.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -37,7 +37,7 @@ function Alert({ color = "info", title, children, onClose, closeLabel = "닫기"
 				color,
 				size: "xs",
 				onClick: onClose,
-				className: "-my-0.5 -me-1",
+				className: `${"-my-0.5 -me-1"} ${"text-accent-on-subtle hover:bg-accent-subtle-hover active:bg-accent-subtle-active"}`,
 				children: /* @__PURE__ */ jsx(XIcon, {})
 			})
 		]

package/dist/Avatar.d.ts

@@ -13,7 +13,7 @@ export interface AvatarProps extends Omit<ComponentProps<"span">, "color" | "chi
   /** `xs` 24px, `sm` 32px, `md` 40px, `lg` 48px. 기본값은 `md`다. */
   size?: AvatarSize;
   /**
-   * fallback 배경과 아이콘의 색 계열(Tide 색 계열 6개와 앱이 `ColorFamilyRegistry`에 더한 계열).
+   * fallback 배경과 아이콘의 색 계열(Tide 색 계열 8개(장식 계열 purple·mint 포함)와 앱이 `ColorFamilyRegistry`에 더한 계열).
    * 뜻이 없는 장식 색이라 Role은 받지 않는다(ADR 0016·0017 후속). 기본값은 `gray`다.
    * 루트에 `data-color`로 붙고 바깥 요소의 색을 물려받지 않는다.
    */

package/dist/Avatar.js

@@ -10,7 +10,7 @@ const sizeClass = {
 	md: "size-10 [&_svg]:size-6",
 	lg: "size-12 [&_svg]:size-7"
 };
-const baseClass = "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-accent-subtle text-accent align-middle select-none [&_svg]:shrink-0";
+const baseClass = "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-accent-subtle text-accent-on-subtle align-middle select-none [&_svg]:shrink-0";
 /** 이미지 층. 아이콘 위에 원 전체를 덮고, `object-fit: cover`처럼 가운데를 채운다. */
 const imageClass = "absolute inset-0 bg-cover bg-center bg-no-repeat";
 /**

package/dist/Badge.d.ts

@@ -1,19 +1,25 @@
 import { Color, FillVariant, Size } from "./types.js";
 import { ComponentProps, ReactElement, ReactNode } from "react";
-/** Badge의 채움 방식. 상호작용이 없어 테두리·투명 채움(`outline`·`ghost`)은 받지 않는다. */
-type BadgeVariant = Extract<FillVariant, "subtle" | "solid">;
+/**
+ * Badge의 채움 방식. 상호작용이 없어 테두리·투명 채움(`outline`·`ghost`)은 받지 않는다.
+ * `faint`는 Badge에만 있는 가장 옅은 강도라(ADR 0022 §1) Button류 공통 `FillVariant`에 넣지 않는다.
+ */
+type BadgeVariant = Extract<FillVariant, "subtle" | "solid"> | "faint";
 /** Badge의 size. 조작 요소가 아니라 높이가 size 표보다 한 단계 작다(`sm` 20px, `md` 24px). */
 type BadgeSize = Extract<Size, "sm" | "md">;
 export interface BadgeProps extends Omit<ComponentProps<"span">, "color" | "children"> {
   /** 상태를 말하는 텍스트. 필수다. 색만으로 상태를 전하지 않기 위해서다(WCAG 1.4.1). */
   children: ReactNode;
-  /** `subtle`(옅은 배경, 기본값)과 `solid`(진한 배경). 같은 화면 안에서는 한 가지로 맞춘다. */
+  /**
+   * `subtle`(파스텔 배경과 테두리, 기본값), `faint`(가장 옅은 배경, 테두리 없음), `solid`(진한 배경).
+   * 같은 화면 안에서는 한 가지로 맞춘다.
+   */
   variant?: BadgeVariant;
   /** `sm` 높이 20px·`label-sm`, `md` 높이 24px·`label-md`. 기본값은 `md`다. */
   size?: BadgeSize;
   /**
    * 색 이름. 상태는 Role(Tide Role 6개와 앱이 `RoleRegistry`에 더한 Role), 뜻 없는 분류는 색 계열 이름
-   * (Tide 색 계열 6개와 앱이 `ColorFamilyRegistry`에 더한 계열)을 쓴다(ADR 0016·0017). 기본값은 `neutral`이다.
+   * (Tide 색 계열 8개(장식 계열 purple·mint 포함)와 앱이 `ColorFamilyRegistry`에 더한 계열)을 쓴다(ADR 0016·0017). 기본값은 `neutral`이다.
    * 루트에 `data-color`로 붙고 바깥 요소의 색을 물려받지 않는다.
    */
   color?: Color;

package/dist/Badge.js

@@ -3,7 +3,8 @@ import { jsx } from "react/jsx-runtime";
 
 // src/Badge.tsx
 const variantClass = {
-	subtle: "bg-accent-subtle text-accent",
+	subtle: "border-accent-subtle bg-accent-subtle text-accent-on-subtle",
+	faint: "bg-accent-faint text-accent-on-subtle",
 	solid: "bg-accent-solid text-accent-on-solid"
 };
 /** 높이는 border 1px를 포함한다. 글자 줄 높이(label-sm 16px, label-md 20px) + border 2px + 세로 여백이다. */

package/dist/Table.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 
 // src/Table.tsx
 const tableClass = "w-full border-collapse text-body-sm text-default";
-const rowClass = "border-b border-default [:where(tbody>&)]:hover:bg-neutral-subtle-hover";
+const rowClass = "border-b border-default [:where(tbody>&)]:hover:bg-hover";
 const headerCellClass = "px-3 py-2.5 text-start align-middle text-label-md";
 const cellClass = "px-3 py-2.5 text-start align-middle";
 /**

package/dist/Tag.d.ts

@@ -34,7 +34,7 @@ export interface TagProps extends Omit<ComponentProps<"div">, "color" | "role" |
   /** 태그 글자. 필수다. 아이콘(장식용)을 앞에 함께 둘 수 있다. */
   children: ReactNode;
   /**
-   * 색 계열 이름. Tide 색 계열 6개와 앱이 `ColorFamilyRegistry`에 더한 계열을 받는다. 기본값은 `gray`다.
+   * 색 계열 이름. Tide 색 계열 8개(장식 계열 purple·mint 포함)와 앱이 `ColorFamilyRegistry`에 더한 계열을 받는다. 기본값은 `gray`다.
    * 분류를 구분하는 뜻 없는 색이라 Role(`primary`·`danger` 등)은 받지 않는다(ADR 0016·0017 후속).
    * 루트에 `data-color`로 붙고 바깥 요소의 색을 물려받지 않는다.
    */

package/dist/Tag.js

@@ -13,7 +13,7 @@ import { useListState } from "react-stately";
 const TagGroupContext = createContext(null);
 const tagGroupClass = "flex flex-wrap items-center gap-2 outline-none";
 const tagClass = [
-	"inline-flex h-8 max-w-full min-w-0 shrink-0 items-center rounded-sm border border-transparent bg-accent-subtle ps-2.5 align-middle text-label-md whitespace-nowrap text-accent outline-none select-none",
+	"inline-flex h-8 max-w-full min-w-0 shrink-0 items-center rounded-sm border border-accent-subtle bg-accent-subtle ps-2.5 align-middle text-label-md whitespace-nowrap text-accent-on-subtle outline-none select-none",
 	"[--tag-remove-hover:var(--tide-accent-subtle-hover)] [--tag-remove-active:var(--tide-accent-subtle-active)]",
 	"aria-disabled:bg-disabled aria-disabled:text-disabled focus-visible:focus-ring"
 ].join(" ");

package/dist/Toast.d.ts

@@ -17,7 +17,7 @@ export interface ToastOptions {
   description?: ReactNode;
   /**
    * Role. Tide Role 6개와 앱이 `RoleRegistry`에 더한 Role을 받는다. 기본값은 `info`다(Alert와 같다).
-   * 상태 아이콘과 그 색, 닫기·액션 버튼 색을 정한다. `danger`(오류)는 자동으로 닫지 않는다.
+   * 상태 아이콘과 그 색을 정한다. 닫기·액션 버튼은 색과 관계없이 neutral이다. `danger`(오류)는 자동으로 닫지 않는다.
    * 색 계열 이름(`blue` 등)은 받지 않는다(ADR 0016).
    */
   color?: Role;

package/dist/Toast.js

@@ -165,7 +165,7 @@ function ToastItem({ toast, open, state, onExited }) {
 					})]
 				}), action !== void 0 && /* @__PURE__ */ jsx(Button, {
 					variant: "outline",
-					color,
+					color: "neutral",
 					size: "sm",
 					className: "self-start",
 					onClick: (event) => {
@@ -178,7 +178,7 @@ function ToastItem({ toast, open, state, onExited }) {
 			/* @__PURE__ */ jsx(IconButton, {
 				"aria-label": closeLabel,
 				variant: "ghost",
-				color,
+				color: "neutral",
 				size: "xs",
 				onClick: close,
 				className: alertCloseClass,

package/dist/alert-style.js

@@ -7,13 +7,12 @@ import { CircleCheckIcon, InfoIcon, OctagonExclamationPointIcon, TriangleExclama
 */
 const alertLayoutClass = "flex items-start gap-3 rounded-lg border p-4";
 /**
-* Alert의 subtle 표면. 모두 등록된 대비 쌍이다.
-* - 글자·아이콘: text-accent × bg-accent-subtle 4.5:1(Role `text-<role>` × `bg-<role>-subtle`, neutral은 text-default ×
-*   bg-neutral-subtle, 앱 Role은 색 이름 규칙 text × subtle)
-* - 경계: border-accent × 바깥 표면 층 3:1(`border-<role>` × 표면 층, neutral은 border-strong)과
-*   × 안쪽 bg-accent-subtle 3:1(`border-<role>` × `bg-<role>-subtle`, neutral은 border-strong × bg-neutral-subtle)
+* Alert의 subtle 표면(ADR 0022 §1).
+* - 글자·아이콘: text-accent-on-subtle × bg-accent-subtle 4.5:1(Role `text-<role>-on-subtle` × `bg-<role>-subtle`, neutral은
+*   text-default × bg-neutral-subtle, 앱 Role은 색 이름 규칙 on-subtle × subtle)
+* - 경계: 파스텔 테두리 border-accent-subtle. 바탕과 글자만으로 알아볼 수 있어 꾸밈이고 대비 검사에서 뺐다.
 */
-const alertSurfaceClass = "border-accent bg-accent-subtle text-accent";
+const alertSurfaceClass = "border-accent-subtle bg-accent-subtle text-accent-on-subtle";
 /** 상태 아이콘 자리. 글자 첫 줄 높이(body-sm 20px)와 같은 20px라 첫 줄 가운데에 맞는다. */
 const alertIconClass = "size-5 shrink-0";
 /** 제목과 본문을 세로로 쌓는다. 긴 단어가 닫기 버튼을 밀어내지 않게 min-w-0을 둔다. */
@@ -24,6 +23,12 @@ const alertTitleClass = "text-body-sm font-semibold";
 const alertDescriptionClass = "text-body-sm";
 /** 닫기 버튼(IconButton xs, 24px). 위아래 2px를 겹쳐 첫 줄 높이(20px)를 늘리지 않고, 끝쪽 4px를 여백에 겹친다. */
 const alertCloseClass = "-my-0.5 -me-1";
+/**
+* Alert(subtle 표면) 안 닫기 버튼의 색. ghost의 기본(text-accent, bg-hover·bg-active)을 덮어쓴다.
+* subtle 바탕 위라 글자는 on-subtle이고, hover·누름은 같은 색의 subtle-hover·subtle-active다
+* (on-subtle × subtle 4.5:1, × subtle-hover·subtle-active 4:1 등록, ADR 0022·0023).
+*/
+const alertSubtleCloseClass = "text-accent-on-subtle hover:bg-accent-subtle-hover active:bg-accent-subtle-active";
 const statusIcons = {
 	neutral: InfoIcon,
 	primary: InfoIcon,
@@ -37,4 +42,4 @@ function alertStatusIcon(color) {
 	return Object.hasOwn(statusIcons, color) ? statusIcons[color] : InfoIcon;
 }
 
-export { alertCloseClass, alertContentClass, alertDescriptionClass, alertIconClass, alertLayoutClass, alertStatusIcon, alertSurfaceClass, alertTitleClass };
+export { alertCloseClass, alertContentClass, alertDescriptionClass, alertIconClass, alertLayoutClass, alertStatusIcon, alertSubtleCloseClass, alertSurfaceClass, alertTitleClass };

package/dist/list-style.js

@@ -21,9 +21,10 @@ const listPopupClass = `isolate z-popover min-w-40 max-w-80 overflow-auto p-[3px
 *   투명 outline은 평소에는 보이지 않고 forced-colors에서 시스템 색으로 그려져 위치가 남는다(그 모드는 배경을 덮는다).
 *   기본 `outline-none`이 outline 모양 변수를 none으로 두므로 `outline-solid`를 함께 쓴다.
 *   항목 안쪽(`-outline-offset-2`)에 그려 이웃 항목·목록 경계와 겹치지 않는다.
-* - `hover`(highlight가 아닐 때): raised 위 항목 규칙의 `subtle-hover`(neutral). 키보드로 옮긴 위치가 따로 있을 때
-*   마우스가 다른 항목 위에 있는 경우다.
-* - `data-selected`(highlight가 아닐 때): 선택 유지 `subtle-active`(neutral). Select·Combobox의 고른 옵션이 쓴다.
+* - `hover`(highlight가 아닐 때): 색 없이 덮는 `bg-hover`(ADR 0022 §3). 키보드로 옮긴 위치가 따로 있을 때
+*   마우스가 다른 항목 위에 있는 경우다. text-default × bg-hover(bg-raised 위 합성)가 4:1(일시 상태, ADR 0023)로 등록되어 있다.
+* - `data-selected`(highlight가 아닐 때): 선택 유지 `subtle-active`(neutral). 상태를 나타내는 바탕이라 덮기로 바꾸지 않는다.
+*   Select·Combobox의 고른 옵션이 쓴다.
 * - `data-disabled`: `text-disabled`, `cursor-not-allowed`. hover 배경이 없다.
 * - 상태끼리 겹칠 때 순서에 기대지 않도록 `not-data-highlighted:`로 서로 뺀다.
 * - transition이 없다. 반복되는 목록 항목은 바로 바뀐다(spec 「motion 적용」).
@@ -32,7 +33,7 @@ const listPopupClass = `isolate z-popover min-w-40 max-w-80 overflow-auto p-[3px
 */
 const listItemClass = [
 	"flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-body-md text-default outline-none select-none [&>svg]:size-4 [&>svg]:shrink-0",
-	"hover:not-data-highlighted:not-data-disabled:bg-neutral-subtle-hover",
+	"hover:not-data-highlighted:not-data-disabled:bg-hover",
 	"data-selected:not-data-highlighted:bg-neutral-subtle-active",
 	"data-highlighted:bg-primary-subtle data-highlighted:text-primary data-highlighted:outline-2 data-highlighted:outline-solid data-highlighted:-outline-offset-2 data-highlighted:outline-transparent",
 	"data-disabled:cursor-not-allowed data-disabled:text-disabled"

package/dist/pressable.js

@@ -1,8 +1,11 @@
 // src/pressable.ts
-/** 기본 색(배경, 글자, 경계). 색 이름마다 Foundation이 같은 대비 규칙으로 검사한다. */
+/**
+* 기본 색(배경, 글자, 경계). 색 이름마다 Foundation이 같은 대비 규칙으로 검사한다.
+* subtle 바탕 위 글자는 파스텔 글자 on-subtle이고(ADR 0022 §1), outline·ghost 글자는 바탕 없는 색 글자 text다.
+*/
 const colorClass = {
 	solid: "border-transparent bg-accent-solid text-accent-on-solid",
-	subtle: "border-transparent bg-accent-subtle text-accent",
+	subtle: "border-transparent bg-accent-subtle text-accent-on-subtle",
 	outline: "border-accent text-accent",
 	ghost: "border-transparent text-accent"
 };
@@ -10,8 +13,8 @@ const colorClass = {
 const interactionClass = {
 	solid: "hover:bg-accent-solid-hover active:bg-accent-solid-active",
 	subtle: "hover:bg-accent-subtle-hover active:bg-accent-subtle-active",
-	outline: "hover:bg-accent-subtle-hover active:bg-accent-subtle-active",
-	ghost: "hover:bg-accent-subtle-hover active:bg-accent-subtle-active"
+	outline: "hover:bg-hover active:bg-active",
+	ghost: "hover:bg-hover active:bg-active"
 };
 /** 비활성 색. 색 이름과 관계없이 같다. disabled Token은 대비 검사 대상이 아니다. */
 const disabledClass = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tide-tds/components",
-  "version": "0.5.1",
+  "version": "0.7.0",
   "description": "Tide 디자인 시스템의 React Component",
   "license": "MIT",
   "repository": {
@@ -23,8 +23,8 @@
     "./styles.css": "./dist/styles.css"
   },
   "dependencies": {
-    "@tide-tds/foundation": "0.5.1",
-    "@tide-tds/icons": "0.5.1",
+    "@tide-tds/foundation": "0.7.0",
+    "@tide-tds/icons": "0.7.0",
     "clsx": "^2.1.1",
     "react-aria": "^3.53.1",
     "react-stately": "^3.51.0",