@cakejp/design-system 0.23.0 → 0.24.0

package/CHANGELOG.md

@@ -11,6 +11,26 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [0.24.0] - 2026-11-06
+
+### ⚠️ Upgrade impact
+
+- **light の成功色が緑からミントになる（視覚変更あり）**: `--Surface-Success` / `--Text-Success` は Forest-600（`#259D63`）から `--Primitive-Teal-800`（`#317860`）、`--Object-Success` は `--Primitive-Teal-700`（`#3E987A`）に変わる。これらのトークンを使っている箇所は、そのままでミントになる。`--Primitive-Forest-*` を成功表示に直接使っている自前のコードは追従しないので、`--Surface-Success-Light` / `--Border-Success` / `--Text-Success` に付け替える（手順は MIGRATION.md の「成功・良い状態の色をミントに」）
+  - dark の値は変わらない（Forest-600 のまま）。`--Surface-Success-Light` / `--Border-Success` は dark では従来の部品と同じ Forest-50 / Forest-200
+  - `--color-green-*`（Tailwind の `green-*`）と `--chart-5` は Forest のパレットのまま変えていない（`text-green-*` / `bg-green-*` を成功表示に使っている箇所はミントにならない）
+
+### 🎨 Changed
+
+- **成功・良い状態の色をケーキ配色の「ミント」に合わせる（Cake.jp 本体 www-test-htdocs #22007）**: パレットの色は足さず、既存の意味トークンの値をパレットの Teal に差し替えた（`semantic.css`・`preset-standalone.css`・`tokens.json`）
+  - light: `--Text-Success` = Teal-800 `#317860`（白の上で 5.27:1。旧 3.45:1 は文字の基準 4.5:1 に届いていなかった）、`--Surface-Success`（白文字を載せる塗り）= Teal-800（白文字で 5.27:1）、`--Object-Success`（アイコン・ドット）= Teal-700 `#3E987A`（白の上で 3.51:1 ≥ 3:1）
+  - 意味トークンを 2 つ追加: `--Surface-Success-Light`（light = Teal-50 `#F0FCF8` / dark = Forest-50）、`--Border-Success`（light = Teal-200 `#ACEED8` / dark = Forest-200）。部品が `Primitive-Forest-50` / `Primitive-Forest-200` を直接参照していて、受け皿の意味トークンが無かったため
+  - 部品の付け替え: `Badge` success の塗りは `--Surface-Success`（hover のみ light は `--Primitive-Teal-900`、dark は `--Primitive-Forest-700` を直接参照）、`Badge` success-subtle と `Tag` success の淡い地は `--Surface-Success-Light`、成功トースト（`Sonner`）の地と枠は `--Surface-Success-Light` / `--Border-Success`、`Alert` success の見出しは `--Text-Success`（旧 Forest-800。dark でも Forest-800 → Forest-600 に変わる。コントラストは 3.25 → 5.04:1 に改善）、外枠は `--Object-Success`・外側の光彩は Teal-700 の rgba（dark は従来の緑のまま）
+  - 意味トークン経由のため自動でミントになる部品: DeliveryCalendar の「○」、StatCard の上昇、NotificationBadge の green、Alert・Sonner のアイコン
+  - stories の `Primitive-Forest-*` 直参照（StatCard のアイコン地、管理画面の成功通知、マイページの注文状態・変更可タグ・完了マーク）も同じトークンに付け替え
+  - コントラスト検査: `Text-Success` × `Surface-Success-Light`（light 5.01:1）、`Text-Success` × `Surface-Secondary`（ベージュ。light 5.01:1）、白文字 × `Surface-Success`（light 5.27:1）の組を追加。`Text-Success` × 白の light 例外（#308・3.44:1）と、Badge success-subtle の light 例外（3.06:1）は基準を満たしたので削除。dark は色を変えていないため、Badge success-subtle の文字（3.06:1）と白文字 × `Surface-Success`（3.45:1）が #335 の期限付き例外として残る
+
+---
+
 ## [0.23.0] - 2026-11-06
 
 KSK（姉妹 DS）の 2026-10-14〜11-02 の改善を取り込み（見た目の既定値は変えない範囲。見た目が変わる候補は #335 で判断待ち）。

package/CLAUDE.md

@@ -107,7 +107,7 @@ PdM や社長が AI（Claude 等）で HTML モックを作る際、このパッ
 | 浮遊レイヤーの地（メニュー・ポップオーバー・ダイアログ・シート） | `var(--Surface-Elevated)` |
 | 情報をまとめる押せない面（説明ボックス・フォームのまとまり・表の見出し行。light はベージュ） | `var(--Surface-Secondary)` / `var(--Surface-Tertiary)` |
 | 押せる部品・hover / 選択 / 無効の地・溝・画像の仮の地・画面全体の地（グレー） | `var(--Surface-Neutral-Secondary)` / `var(--Surface-Neutral-Tertiary)` |
-| 成功 | `var(--color-green-500)` |
+| 成功（良い状態・タグ。light はミント） | 文字 `var(--Text-Success)` / 淡い地 `var(--Surface-Success-Light)` / 枠 `var(--Border-Success)` |
 
 詳細は `tokens.json` を参照。高コントラスト（OS の「コントラストを上げる」か、`<html data-contrast="more">`。`#root` など Portal の外側の要素に付けると body 直下に描かれる Dialog / Popover / 選択肢の一覧には効かない）のときの枠・溝・フォーカスリングは DS が自動で切り替えるので、`--Border-Control` 等を自分で宣言・上書きしない。
 

package/MIGRATION.md

@@ -7,7 +7,43 @@
 
 ---
 
-## 次期リリース — 面の色をベージュに（`--Surface-Neutral-*` の追加）
+## 0.24.0 — 成功・良い状態の色をミントに（`--Surface-Success-Light` / `--Border-Success` の追加）
+
+### 概要
+
+light の成功色を、緑（Forest）から Cake.jp 本体の「ミント」（Teal）に変えました。
+
+| 役割 | トークン | light | dark |
+|---|---|---|---|
+| 成功の文字 | `--Text-Success` | Teal-800 `#317860` | Forest-600（変更なし） |
+| 白文字を載せる塗り | `--Surface-Success` | Teal-800 `#317860` | Forest-600（変更なし） |
+| アイコン・ドット | `--Object-Success` | Teal-700 `#3E987A` | Forest-600（変更なし） |
+| 淡い地（新規） | `--Surface-Success-Light` | Teal-50 `#F0FCF8` | Forest-50 |
+| 枠（新規） | `--Border-Success` | Teal-200 `#ACEED8` | Forest-200 |
+
+DS の部品は付け替え済みなので、DS の部品だけで組んだ画面は対応不要です。ミントは「空きあり」などの良い状態・成功・タグ用で、押すもの（CTA）には使いません。
+
+### 各サイトでやること
+
+自前のコードで `--Primitive-Forest-*`（`bg-[var(--Primitive-Forest-50)]` など）を成功表示に直接使っている箇所は、DS に追従しないので付け替えます。
+
+- 淡い地（`Forest-50` / `Forest-100`）→ `--Surface-Success-Light`
+- 枠（`Forest-200`）→ `--Border-Success`
+- 文字（`Forest-600` / `Forest-700` / `Forest-800`）→ `--Text-Success`
+- アイコン・ドット（`Forest-500` / `Forest-600`）→ `--Object-Success`
+- 白文字を載せる塗り（`Forest-600`）→ `--Surface-Success`
+
+```bash
+# 付け替え候補を洗い出す
+grep -rnE "Primitive-Forest-" src
+```
+
+- Tailwind の `green-*`（`text-green-600` など）は Forest のパレットのままなので、成功表示に使っているものは上のトークンに付け替える
+- グラフの系列色など、成功の意味でない緑はそのままでよい
+
+---
+
+## 0.23.0 — 面の色をベージュに（`--Surface-Neutral-*` の追加）
 
 ### 概要
 

package/contracts/components.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "Cake.jp Design System — Component Contracts",
-    "version": "0.23.0",
+    "version": "0.24.0",
     "description": "全コンポーネントの構造化定義。バリアント・アクセシビリティ要件・使用ルールを機械可読形式で管理。",
     "kind": "kind:\"shell\" は複数ページで再利用されるレイアウト枠（AdminShell / WorkspaceShell / MypageShell 等）。無印は部品コンポーネント。固有ページを組むときは該当 shell から始める。src/components/pages/ 配下のストーリーは特定ページ専用・非配布のため contracts の対象外。",
     "naming": "コンポーネント名は**用途ではなく機能**で付ける。用途名（QuantitySelector = カート数量）にすると、同じ機能を別の文脈で探した人が見つけられず二重実装が生まれる（実例: 用途名だったため NumberInput が別途作られ、意匠の違うステッパーが 2 つになった）。「〜Selector」「〜Picker」等の用途接尾辞を付ける前に、その部品が何をするものかで名前が付けられないかを先に検討する。既存名を機能名へ変える場合は deprecatedAliases に旧名を残す。",

package/contracts/composition.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "Cake.jp Design System — Composition Contracts",
-    "version": "0.23.0",
+    "version": "0.24.0",
     "description": "ページ骨格・視覚階層・余白リズムの機械可読な正本。画面パターンを選んだ後の「実際の組み方」を規定する。ページの外枠（モバイル/デスクトップ/管理）、商品グリッドの列数、余白の4段リズム、Surface のネスト階層、テキスト階層、CTA の優先順位を構造化する。人間向けの解説は guidelines/composition/layout.md・guidelines/composition/hierarchy.md・guidelines/overview.md。",
     "source": "guidelines/composition/layout.md, guidelines/composition/hierarchy.md, guidelines/overview.md, guidelines/components/button.md（CTA 密度ルール）を正本化",
     "roleSeparation": "screen-patterns.json はページ種別（Standard Page / Focused Workspace / ResponsiveDialog / Dialog）を選ぶための契約。composition.json は選んだ後、その骨格をどう組むか（外枠構造・余白リズム・階層）の契約。前者=何を使うか、後者=どう並べるか。",

package/contracts/rules.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "Cake.jp Design System — Rules Contracts",
-    "version": "0.23.0",
+    "version": "0.24.0",
     "description": "禁止パターン・アクセシビリティ要件・ライティングルールの構造化定義。lint-scratch.sh と check-drift.sh で自動検証。"
   },
   "prohibited": [

package/contracts/screen-patterns.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "Cake.jp Design System — Screen Patterns Contracts",
-    "version": "0.23.0",
+    "version": "0.24.0",
     "description": "CRUD 機能でどの画面パターンを使うかの機械可読な判断基準。5パターンの定義・CRUD 対応・決定木・編集UIの観点比較を構造化する。人間向けの解説は guidelines/foundations/screen-patterns.md。",
     "source": "GitHub issue #37 CRUDの画面設計の型化と基本パターンの整備",
     "relatedContract": "本契約はページ種別の選択（何を使うか）を担う。選んだ後の骨格の組み方（外枠構造・余白リズム・視覚階層）は contracts/composition.json を参照する。",

package/dist/components/foundations/alert.js

@@ -1,22 +1,22 @@
 "use client";
-import { jsx as i, jsxs as c } from "react/jsx-runtime";
+import { jsx as n, jsxs as c } from "react/jsx-runtime";
 import * as w from "react";
-import { cva as _ } from "class-variance-authority";
+import { cva as N } from "class-variance-authority";
 import h from "iconsax-reactjs/dist/esm/Warning2.js";
 import I from "iconsax-reactjs/dist/esm/InfoCircle.js";
-import M from "iconsax-reactjs/dist/esm/TickCircle.js";
-import S from "iconsax-reactjs/dist/esm/CloseCircle.js";
+import V from "iconsax-reactjs/dist/esm/TickCircle.js";
+import k from "iconsax-reactjs/dist/esm/CloseCircle.js";
 import { cn as t } from "../../lib/utils.js";
-const p = _(
+const p = N(
   "relative w-full",
   {
     variants: {
       variant: {
-        /** success — green border, green title, white bg */
+        /** success — mint border, mint title, white bg（dark は従来の緑の枠） */
         success: [
           "flex flex-col items-start overflow-clip rounded-lg",
           "bg-[var(--Surface-Primary)]",
-          "shadow-[0_0_0_5px_rgba(31,204,132,0.2)]"
+          "shadow-[0_0_0_5px_rgba(62,152,122,0.2)] dark:shadow-[0_0_0_5px_rgba(31,204,132,0.2)]"
         ].join(" "),
         /** info — gray border, dark title, white bg */
         info: [
@@ -60,12 +60,12 @@ const p = _(
       variant: "info"
     }
   }
-), N = _(
+), y = N(
   "flex w-full gap-2 items-start p-4 rounded-lg border",
   {
     variants: {
       variant: {
-        success: "border-[var(--Focus-High-Emphasis)]",
+        success: "border-[var(--Object-Success)] dark:border-[var(--Focus-High-Emphasis)]",
         info: "border-[var(--Border-Medium-Emphasis)]",
         error: "border-[var(--Border-Caution)]",
         warning: "border-[var(--Primitive-Wood-800)]",
@@ -78,10 +78,10 @@ const p = _(
       variant: "info"
     }
   }
-), s = w.createContext("info"), W = (r) => r === "success" || r === "info" || r === "error" || r === "warning", k = (r) => r === "inline-info" || r === "inline-caution" || r === "inline-warning", A = {
-  success: { Icon: M, color: "text-[var(--Text-Success)]" },
+), s = w.createContext("info"), M = (r) => r === "success" || r === "info" || r === "error" || r === "warning", W = (r) => r === "inline-info" || r === "inline-caution" || r === "inline-warning", A = {
+  success: { Icon: V, color: "text-[var(--Text-Success)]" },
   info: { Icon: I, color: "text-[var(--Text-Medium-Emphasis)]" },
-  error: { Icon: S, color: "text-[var(--Text-Caution)]" },
+  error: { Icon: k, color: "text-[var(--Text-Caution)]" },
   warning: { Icon: h, color: "text-[var(--Text-Warning)]" }
 }, B = {
   "inline-info": { Icon: I, color: "text-[var(--Text-Medium-Emphasis)]" },
@@ -89,58 +89,58 @@ const p = _(
   "inline-warning": { Icon: h, color: "text-[var(--Text-Warning)]" }
 }, H = (r) => r === "error" || r === "warning" || r === "inline-caution" || r === "inline-warning" ? "alert" : "status", R = (r, e, o) => {
   if (o !== void 0) return o;
-  const n = e ?? H(r);
-  return n === "off" ? void 0 : n;
+  const i = e ?? H(r);
+  return i === "off" ? void 0 : i;
 };
-function K({
+function J({
   className: r,
   variant: e = "info",
   children: o,
-  title: n,
+  title: i,
   description: a,
-  icon: C,
+  icon: T,
   action: l,
-  live: j,
+  live: S,
   role: E,
   ...d
 }) {
-  const m = R(e, j, E), x = W(e), T = k(e), y = (x || T) && !o && (n || a);
-  if (y && x) {
-    const { Icon: f, color: u } = A[e], v = b[e] ?? "", g = C ?? /* @__PURE__ */ i(f, { size: 24, className: t("shrink-0", u) });
-    return /* @__PURE__ */ i(s.Provider, { value: e, children: /* @__PURE__ */ i(
+  const x = R(e, S, E), m = M(e), C = W(e), _ = (m || C) && !o && (i || a);
+  if (_ && m) {
+    const { Icon: u, color: f } = A[e], v = b[e] ?? "", g = T ?? /* @__PURE__ */ n(u, { size: 24, className: t("shrink-0", f) });
+    return /* @__PURE__ */ n(s.Provider, { value: e, children: /* @__PURE__ */ n(
       "div",
       {
         "data-slot": "alert",
         "data-variant": e,
-        role: m,
+        role: x,
         className: t(p({ variant: e }), r),
         ...d,
-        children: /* @__PURE__ */ c("div", { className: N({ variant: e }), children: [
+        children: /* @__PURE__ */ c("div", { className: y({ variant: e }), children: [
           g,
           /* @__PURE__ */ c("div", { className: "flex-1 min-w-0", children: [
-            n && /* @__PURE__ */ i("div", { className: t("typo-label-md", v), children: n }),
-            a && /* @__PURE__ */ i("div", { className: "typo-body-sm text-[var(--Text-Medium-Emphasis)] mt-1", children: a })
+            i && /* @__PURE__ */ n("div", { className: t("typo-label-md", v), children: i }),
+            a && /* @__PURE__ */ n("div", { className: "typo-body-sm text-[var(--Text-Medium-Emphasis)] mt-1", children: a })
           ] }),
-          l && /* @__PURE__ */ i("div", { className: "shrink-0", children: l })
+          l && /* @__PURE__ */ n("div", { className: "shrink-0", children: l })
         ] })
       }
     ) });
   }
-  if (y && T) {
-    const { Icon: f, color: u } = B[e], v = b[e] ?? "", g = P[e] ?? "", V = C ?? /* @__PURE__ */ i(f, { size: 20, className: t("shrink-0", u) });
-    return /* @__PURE__ */ i(s.Provider, { value: e, children: /* @__PURE__ */ c(
+  if (_ && C) {
+    const { Icon: u, color: f } = B[e], v = b[e] ?? "", g = j[e] ?? "", P = T ?? /* @__PURE__ */ n(u, { size: 20, className: t("shrink-0", f) });
+    return /* @__PURE__ */ n(s.Provider, { value: e, children: /* @__PURE__ */ c(
       "div",
       {
         "data-slot": "alert",
         "data-variant": e,
-        role: m,
+        role: x,
         className: t(p({ variant: e }), r),
         ...d,
         children: [
-          /* @__PURE__ */ i("div", { className: "flex items-center py-[2.5px] shrink-0", children: V }),
+          /* @__PURE__ */ n("div", { className: "flex items-center py-[2.5px] shrink-0", children: P }),
           /* @__PURE__ */ c("div", { className: "flex flex-1 flex-col", children: [
-            n && /* @__PURE__ */ i("div", { className: t("typo-label-md", v), children: n }),
-            a && /* @__PURE__ */ i(
+            i && /* @__PURE__ */ n("div", { className: t("typo-label-md", v), children: i }),
+            a && /* @__PURE__ */ n(
               "div",
               {
                 className: t(
@@ -151,25 +151,25 @@ function K({
               }
             )
           ] }),
-          l && /* @__PURE__ */ i("div", { className: "shrink-0", children: l })
+          l && /* @__PURE__ */ n("div", { className: "shrink-0", children: l })
         ]
       }
     ) });
   }
-  return /* @__PURE__ */ i(s.Provider, { value: e, children: /* @__PURE__ */ i(
+  return /* @__PURE__ */ n(s.Provider, { value: e, children: /* @__PURE__ */ n(
     "div",
     {
       "data-slot": "alert",
       "data-variant": e,
-      role: m,
+      role: x,
       className: t(p({ variant: e }), r),
       ...d,
-      children: x ? /* @__PURE__ */ i("div", { className: N({ variant: e }), children: o }) : o
+      children: m ? /* @__PURE__ */ n("div", { className: y({ variant: e }), children: o }) : o
     }
   ) });
 }
 const b = {
-  success: "text-[var(--Primitive-Forest-800)]",
+  success: "text-[var(--Text-Success)]",
   info: "text-[var(--Text-High-Emphasis)]",
   error: "text-[var(--Text-Caution)]",
   warning: "text-[var(--Text-Warning)]",
@@ -177,22 +177,22 @@ const b = {
   "inline-caution": "text-[var(--Text-Caution)]",
   "inline-warning": "text-[var(--Text-Warning)]"
 };
-function O({ className: r, ...e }) {
-  const o = w.useContext(s), n = b[o ?? "info"] ?? "";
-  return /* @__PURE__ */ i(
+function K({ className: r, ...e }) {
+  const o = w.useContext(s), i = b[o ?? "info"] ?? "";
+  return /* @__PURE__ */ n(
     "div",
     {
       "data-slot": "alert-title",
       className: t(
         "typo-label-md",
-        n,
+        i,
         r
       ),
       ...e
     }
   );
 }
-const P = {
+const j = {
   error: "text-[var(--Text-Caution)]",
   "inline-caution": "text-[var(--Text-Caution)]",
   "inline-warning": "text-[var(--Text-Warning)]"
@@ -201,14 +201,14 @@ function Q({
   className: r,
   ...e
 }) {
-  const o = w.useContext(s), n = P[o ?? ""] ?? "";
-  return /* @__PURE__ */ i(
+  const o = w.useContext(s), i = j[o ?? ""] ?? "";
+  return /* @__PURE__ */ n(
     "div",
     {
       "data-slot": "alert-description",
       className: t(
         "typo-body-sm",
-        n || "text-[var(--Text-Medium-Emphasis)]",
+        i || "text-[var(--Text-Medium-Emphasis)]",
         r
       ),
       ...e
@@ -216,10 +216,10 @@ function Q({
   );
 }
 export {
-  K as Alert,
+  J as Alert,
   Q as AlertDescription,
-  O as AlertTitle,
-  P as alertDescriptionVariants,
+  K as AlertTitle,
+  j as alertDescriptionVariants,
   b as alertTitleVariants,
   p as alertVariants
 };

package/dist/components/foundations/badge.js

@@ -11,10 +11,10 @@ const u = o(
         // ── 塗りつぶし（濃い背景 + 白文字） ──
         default: "bg-[var(--Brand-Cake-Orange)] text-[var(--Text-on-Inverse)] [a&]:hover:bg-[var(--Hover-Primary-Button)]",
         destructive: "bg-[var(--Surface-Caution)] text-[var(--Text-on-Inverse)] focus-visible:ring-destructive/20 [a&]:hover:bg-destructive/90",
-        success: "bg-[var(--Primitive-Forest-600)] text-[var(--Text-on-Inverse)] [a&]:hover:bg-[var(--Primitive-Forest-700)]",
+        success: "bg-[var(--Surface-Success)] text-[var(--Text-on-Inverse)] [a&]:hover:bg-[var(--Primitive-Teal-900)] dark:[a&]:hover:bg-[var(--Primitive-Forest-700)]",
         // ── サブトル（薄い背景 + 色文字）— ステータス表示用 ──
         "info-subtle": "bg-[var(--Primitive-Sea-100)] text-[var(--Primitive-Sea-700)]",
-        "success-subtle": "bg-[var(--Primitive-Forest-50)] text-[var(--Text-Success)]",
+        "success-subtle": "bg-[var(--Surface-Success-Light)] text-[var(--Text-Success)]",
         "accent-subtle": "bg-[var(--Surface-Accent-Primary-Light)] text-[var(--Text-Accent-Primary)]",
         "caution-subtle": "bg-[var(--Surface-Caution-Light)] text-[var(--Text-Caution)]",
         "warning-subtle": "bg-[var(--Surface-Warning)] text-[var(--Text-Warning)] border-[var(--Primitive-Wood-200)]",
@@ -31,7 +31,7 @@ const u = o(
     }
   }
 );
-function m({
+function f({
   className: e,
   variant: r = "default",
   asChild: a = !1,
@@ -49,6 +49,6 @@ function m({
   );
 }
 export {
-  m as Badge,
+  f as Badge,
   u as badgeVariants
 };

package/dist/components/foundations/sonner.js

@@ -1,22 +1,22 @@
 "use client";
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as a } from "react/jsx-runtime";
 import { Loader2Icon as t, OctagonXIcon as i, TriangleAlertIcon as o, InfoIcon as s, CircleCheckIcon as n } from "lucide-react";
-import { useTheme as v } from "next-themes";
-import { toast as c, Toaster as m } from "sonner";
-const g = ({ ...a }) => {
-  const { theme: e = "system" } = v();
-  return /* @__PURE__ */ r(
+import { useTheme as c } from "next-themes";
+import { toast as v, Toaster as m } from "sonner";
+const g = ({ ...r }) => {
+  const { theme: e = "system" } = c();
+  return /* @__PURE__ */ a(
     m,
     {
       theme: e,
       className: "toaster group",
       icons: {
-        success: /* @__PURE__ */ r(n, { className: "size-4 text-[var(--Text-Success)]" }),
-        info: /* @__PURE__ */ r(s, { className: "size-4 text-[var(--Primitive-Sea-600)]" }),
-        warning: /* @__PURE__ */ r(o, { className: "size-4 text-[var(--Text-Warning)]" }),
-        error: /* @__PURE__ */ r(i, { className: "size-4 text-[var(--Primitive-Sun-800)]" }),
+        success: /* @__PURE__ */ a(n, { className: "size-4 text-[var(--Text-Success)]" }),
+        info: /* @__PURE__ */ a(s, { className: "size-4 text-[var(--Primitive-Sea-600)]" }),
+        warning: /* @__PURE__ */ a(o, { className: "size-4 text-[var(--Text-Warning)]" }),
+        error: /* @__PURE__ */ a(i, { className: "size-4 text-[var(--Primitive-Sun-800)]" }),
         // 動きを減らす設定では回転を止める（--Motion-* の一括制御は animate-spin に効かない）
-        loading: /* @__PURE__ */ r(t, { className: "size-4 animate-spin motion-reduce:animate-none text-[var(--Text-Medium-Emphasis)]" })
+        loading: /* @__PURE__ */ a(t, { className: "size-4 animate-spin motion-reduce:animate-none text-[var(--Text-Medium-Emphasis)]" })
       },
       toastOptions: {
         classNames: {
@@ -28,7 +28,7 @@ const g = ({ ...a }) => {
           // 中の description / cancel もモード反転しない primitive に固定する。
           // semantic（Text-Medium-Emphasis 等）のままだとダークモードで白系に反転し、
           // 明色背景の上で文字が不可視になる（デフォルトトーストは背景が反転するので semantic のままで正しい）
-          success: "!bg-[var(--Primitive-Forest-50)] !border-[var(--Primitive-Forest-200)] !text-[var(--Text-Success)] [&_[data-description]]:!text-[var(--Primitive-Gray-700)] [&_[data-cancel]]:!bg-[var(--Primitive-Gray-100)] [&_[data-cancel]]:!text-[var(--Primitive-Gray-900)]",
+          success: "!bg-[var(--Surface-Success-Light)] !border-[var(--Border-Success)] !text-[var(--Text-Success)] [&_[data-description]]:!text-[var(--Primitive-Gray-700)] [&_[data-cancel]]:!bg-[var(--Primitive-Gray-100)] [&_[data-cancel]]:!text-[var(--Primitive-Gray-900)]",
           error: "!bg-[var(--Surface-Caution-Light)] !border-[var(--Border-Caution)] !text-[var(--Primitive-Sun-800)] [&_[data-description]]:!text-[var(--Primitive-Gray-700)] [&_[data-cancel]]:!bg-[var(--Primitive-Gray-100)] [&_[data-cancel]]:!text-[var(--Primitive-Gray-900)]",
           warning: "!bg-[var(--Surface-Warning)] !border-[var(--Primitive-Wood-200)] !text-[var(--Text-Warning)] [&_[data-description]]:!text-[var(--Primitive-Gray-700)] [&_[data-cancel]]:!bg-[var(--Primitive-Gray-100)] [&_[data-cancel]]:!text-[var(--Primitive-Gray-900)]",
           info: "!bg-[var(--Primitive-Sea-50)] !border-[var(--Primitive-Sea-200)] !text-[var(--Primitive-Sea-600)] [&_[data-description]]:!text-[var(--Primitive-Gray-700)] [&_[data-cancel]]:!bg-[var(--Primitive-Gray-100)] [&_[data-cancel]]:!text-[var(--Primitive-Gray-900)]"
@@ -42,10 +42,10 @@ const g = ({ ...a }) => {
       },
       position: "bottom-center",
       containerAriaLabel: "通知",
-      ...a
+      ...r
     }
   );
-}, p = c;
+}, p = v;
 export {
   g as Toaster,
   p as toast

package/dist/components/primitives/tag.js

@@ -1,8 +1,8 @@
 import { jsxs as n } from "react/jsx-runtime";
 import "react";
-import { cva as o } from "class-variance-authority";
-import { cn as s } from "../../lib/utils.js";
-const x = o(
+import { cva as s } from "class-variance-authority";
+import { cn as o } from "../../lib/utils.js";
+const x = s(
   "inline-flex items-center gap-1 rounded text-nowrap",
   {
     variants: {
@@ -15,7 +15,7 @@ const x = o(
         warning: "bg-[var(--Primitive-Wood-100)] text-[var(--Text-Warning)]",
         info: "bg-[var(--Primitive-Sea-50)] text-[var(--Primitive-Sea-600)] dark:bg-[var(--Primitive-Sea-600)] dark:text-[var(--Primitive-White-alpha-1000)]",
         "info-fill": "bg-[var(--Primitive-Sea-600)] text-[var(--Text-on-Inverse)]",
-        success: "bg-[var(--Primitive-Forest-50)] text-[var(--Text-Success)]",
+        success: "bg-[var(--Surface-Success-Light)] text-[var(--Text-Success)]",
         accent: "bg-[var(--Surface-Accent-Primary-Light)] text-[var(--Text-Accent-Primary)]",
         timesale: "bg-[var(--Primitive-Wood-400)] text-[var(--Text-on-Inverse)]",
         berry: "bg-[var(--Primitive-Berry-700)] text-[var(--Text-on-Inverse)]",
@@ -44,7 +44,7 @@ function d({
     "span",
     {
       "data-slot": "tag",
-      className: s(x({ variant: r, size: t }), a),
+      className: o(x({ variant: r, size: t }), a),
       ...v,
       children: [
         e,