@cakejp/design-system 0.23.0 → 0.24.0

package/dist/index.js

@@ -6340,11 +6340,11 @@ export {
 //   {
 //     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: [
@@ -6396,7 +6396,7 @@ export {
 //   {
 //     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)]",
@@ -6606,7 +6606,7 @@ export {
 // 
 // /* --- Title variant styles --- */
 // const alertTitleVariants: Record<string, string> = {
-//   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)]",
@@ -6816,13 +6816,13 @@ export {
 //         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)]",
+//           "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)]",
+//           "bg-[var(--Surface-Success-Light)] text-[var(--Text-Success)]",
 //         "accent-subtle":
 //           "bg-[var(--Surface-Accent-Primary-Light)] text-[var(--Text-Accent-Primary)]",
 //         "caution-subtle":
@@ -13774,7 +13774,7 @@ export {
 //           // 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)]",
+//             "!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:
@@ -24750,7 +24750,7 @@ export {
 //         "info-fill":
 //           "bg-[var(--Primitive-Sea-600)] text-[var(--Text-on-Inverse)]",
 //         success:
-//           "bg-[var(--Primitive-Forest-50)] text-[var(--Text-Success)]",
+//           "bg-[var(--Surface-Success-Light)] text-[var(--Text-Success)]",
 //         accent:
 //           "bg-[var(--Surface-Accent-Primary-Light)] text-[var(--Text-Accent-Primary)]",
 //         timesale:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cakejp/design-system",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "type": "module",
   "description": "Cake.jp Design System — UI コンポーネント・カラートークン・タイポグラフィ",
   "license": "UNLICENSED",

package/src/preset-standalone.css

@@ -183,7 +183,7 @@
  * （および tokens.json 未収録グループは primitive 実値）まで解決し、
  * 素の `:root` / `.dark` として展開したもの。
  *
- * 展開対象（全 78 semantic トークン名）: Surface-* / Text-* / Object-* / Hover-* /
+ * 展開対象（全 80 semantic トークン名）: Surface-* / Text-* / Object-* / Hover-* /
  * Active-* / Border-* / Brand-* / Overlay-* / Surface-Glass-* / Caution-* /
  * Focus-High-Emphasis / Third-Party-*。一覧・hex 整合は
  * __tests__/preset-standalone-coverage.test.ts でガードしている。
@@ -203,7 +203,8 @@
   --Surface-Caution-Light: #FFE7E6;
   --Surface-Accent-Primary: #E5175C;
   --Surface-Accent-Primary-Light: #FBD4E0;
-  --Surface-Success: #259D63;
+  --Surface-Success: #317860;
+  --Surface-Success-Light: #F0FCF8;
   --Surface-Warning: #F8F1E0;
   --Surface-Info: #003EE5;
   --Surface-Info-Light: #E8F1FE;
@@ -214,7 +215,7 @@
   --Text-Accent-Primary: #B5175C;
   --Text-Accent-Secondary: #F491B2;
   --Text-on-Inverse: #FFFFFF;
-  --Text-Success: #259D63;
+  --Text-Success: #317860;
   --Text-Caution: #EC0000;
   --Text-Warning: #C16800;
   --Text-Info: #003EE5;
@@ -228,7 +229,7 @@
   --Object-High-Emphasis-on-Inverse: #FFFFFF;
   --Object-Caution: #EC0000;
   --Object-Warning: #C16800;
-  --Object-Success: #259D63;
+  --Object-Success: #3E987A;
   --Object-Info: #003EE5;
   --Hover-Primary-Button: #B5175C;
   --Hover-Secondary-Button: #F7B1C8;
@@ -246,6 +247,7 @@
   --Border-Accent-Primary: #E5175C;
   --Border-Favorite: #E5175C;
   --Border-Caution: #EC0000;
+  --Border-Success: #ACEED8;
   --Border-Info: #003EE5;
   --Brand-Cake-Orange: #E5175C;
   --Brand-Cake-Orange-Light: #F7B1C8;
@@ -289,6 +291,7 @@
   --Surface-Accent-Primary: #E5175C;
   --Surface-Accent-Primary-Light: #E5175C26;
   --Surface-Success: #259D63;
+  --Surface-Success-Light: #E6F5EC;
   --Surface-Warning: #F8F1E0;
   --Surface-Info: #003EE5;
   --Surface-Info-Light: #E8F1FE;
@@ -331,6 +334,7 @@
   --Border-Accent-Primary: #EA296A;
   --Border-Favorite: #EA296A;
   --Border-Caution: #EC0000;
+  --Border-Success: #9BD4B5;
   --Border-Info: #4979F5;
   --Brand-Cake-Orange: #E5175C;
   --Brand-Cake-Orange-Light: #F7B1C8;

package/src/styles/semantic.css

@@ -34,7 +34,10 @@
   --Surface-Caution-Light: var(--Primitive-Sun-50);
   --Surface-Accent-Primary: var(--Primitive-Berry-700);
   --Surface-Accent-Primary-Light: var(--Primitive-Berry-50);
-  --Surface-Success: var(--Primitive-Forest-600);
+  /* 成功・良い状態（ケーキ配色の「ミント」）。塗り（白い文字を載せる）は Teal-800、淡い地は Surface-Success-Light。
+     押すもの（CTA）には使わない。dark は従来の Forest のまま。 */
+  --Surface-Success: var(--Primitive-Teal-800);
+  --Surface-Success-Light: var(--Primitive-Teal-50);
   --Surface-Warning: var(--Primitive-Wood-50);
   --Surface-Info: var(--Primitive-Sea-600);
   --Surface-Info-Light: var(--Primitive-Sea-50);
@@ -47,7 +50,7 @@
   --Text-Accent-Primary: var(--Primitive-Berry-800);
   --Text-Accent-Secondary: var(--Primitive-Berry-200);
   --Text-on-Inverse: var(--Primitive-White-alpha-1000);
-  --Text-Success: var(--Primitive-Forest-600);
+  --Text-Success: var(--Primitive-Teal-800);
   --Text-Caution: var(--Primitive-Sun-800);
   --Text-Warning: var(--Primitive-Wood-800);
   --Text-Info: var(--Primitive-Sea-600);
@@ -63,7 +66,7 @@
   --Object-High-Emphasis-on-Inverse: var(--Primitive-White-alpha-1000);
   --Object-Caution: var(--Primitive-Sun-800);
   --Object-Warning: var(--Primitive-Wood-800);
-  --Object-Success: var(--Primitive-Forest-600);
+  --Object-Success: var(--Primitive-Teal-700);
   --Object-Info: var(--Primitive-Sea-600);
 
   /* Hover / Active */
@@ -85,6 +88,7 @@
   --Border-Accent-Primary: var(--Brand-Cake-Orange);
   --Border-Favorite: var(--Brand-Cake-Orange);
   --Border-Caution: var(--Surface-Caution);
+  --Border-Success: var(--Primitive-Teal-200);
   --Border-Info: var(--Primitive-Sea-600);
 
   /* Brand
@@ -156,6 +160,7 @@
   --Surface-Accent-Primary: var(--Primitive-Berry-700);
   --Surface-Accent-Primary-Light: #E5175C26; /* Brand(Berry) at ~15% alpha — ダーク背景で濁らないよう調整 */
   --Surface-Success: var(--Primitive-Forest-600);
+  --Surface-Success-Light: var(--Primitive-Forest-50);
   --Surface-Warning: var(--Primitive-Wood-50);
   --Surface-Info: var(--Primitive-Sea-600);
   --Surface-Info-Light: var(--Primitive-Sea-50);
@@ -206,6 +211,7 @@
   --Border-Accent-Primary: var(--Primitive-Berry-600);
   --Border-Favorite: var(--Primitive-Berry-600);
   --Border-Caution: var(--Surface-Caution);
+  --Border-Success: var(--Primitive-Forest-200);
   --Border-Info: var(--Primitive-Sea-400);
 
   /* Brand（ダークでも同じ） */

package/tokens.json

@@ -156,9 +156,14 @@
           "usage": "アクセント背景（薄）"
         },
         "success": {
-          "value": "Primitive-Forest-600",
-          "hex": "#259D63",
-          "usage": "成功背景"
+          "value": "Primitive-Teal-800",
+          "hex": "#317860",
+          "usage": "成功・良い状態の塗り（白い文字を載せる。白文字で 5.27:1）。ケーキ配色の「ミント」"
+        },
+        "success-light": {
+          "value": "Primitive-Teal-50",
+          "hex": "#F0FCF8",
+          "usage": "成功・良い状態の淡い地（Badge success-subtle・Tag success・成功トーストの地）。dark は Forest-50（従来どおり）"
         },
         "warning": {
           "value": "Primitive-Wood-50",
@@ -232,9 +237,9 @@
           "usage": "反転背景上の白文字"
         },
         "success": {
-          "value": "Primitive-Forest-600",
-          "hex": "#259D63",
-          "usage": "成功状態"
+          "value": "Primitive-Teal-800",
+          "hex": "#317860",
+          "usage": "成功・良い状態の文字（白の上で 5.27:1）。ケーキ配色の「ミント」"
         },
         "caution": {
           "value": "Primitive-Sun-800",
@@ -281,6 +286,11 @@
           "hex": "#EC0000",
           "usage": "エラーボーダー"
         },
+        "success": {
+          "value": "Primitive-Teal-200",
+          "hex": "#ACEED8",
+          "usage": "成功・良い状態の枠（成功トーストの枠など）。dark は Forest-200（従来どおり）"
+        },
         "favorite": {
           "value": "var(--Brand-Cake-Orange)",
           "usage": "Border-Favorite のCSS契約値"
@@ -357,8 +367,8 @@
           "usage": "Object-Warning のCSS契約値"
         },
         "success": {
-          "value": "var(--Primitive-Forest-600)",
-          "usage": "Object-Success のCSS契約値"
+          "value": "var(--Primitive-Teal-700)",
+          "usage": "Object-Success のCSS契約値（アイコン・ドット。白の上で 3.51:1）"
         },
         "info": {
           "value": "var(--Primitive-Sea-600)",
@@ -532,6 +542,10 @@
           "value": "var(--Primitive-Forest-600)",
           "usage": "Surface-Success のCSS契約値"
         },
+        "success-light": {
+          "value": "var(--Primitive-Forest-50)",
+          "usage": "Surface-Success-Light のCSS契約値（dark は従来の部品の見た目を保つ Forest-50）"
+        },
         "warning": {
           "value": "var(--Primitive-Wood-50)",
           "usage": "Surface-Warning のCSS契約値"
@@ -726,6 +740,10 @@
           "value": "var(--Surface-Caution)",
           "usage": "Border-Caution のCSS契約値"
         },
+        "success": {
+          "value": "var(--Primitive-Forest-200)",
+          "usage": "Border-Success のCSS契約値（dark は従来の部品の見た目を保つ Forest-200）"
+        },
         "info": {
           "value": "var(--Primitive-Sea-400)",
           "usage": "Border-Info のCSS契約値"