@cakejp/design-system 0.22.1 → 0.24.0

package/tokens.json

@@ -78,6 +78,7 @@
         "900": "#0017B6"
       },
       "Wood": {
+        "25": "#FCF9F2",
         "50": "#F8F1E0",
         "100": "#EFDBB1",
         "200": "#E5C47F",
@@ -110,14 +111,24 @@
           "usage": "メイン背景"
         },
         "secondary": {
+          "value": "Primitive-Wood-25",
+          "hex": "#FCF9F2",
+          "usage": "情報をまとめる押せない面（説明ボックス・フォームのまとまり・Card 既定・表の見出し行など）。ケーキ配色の「スポンジ」のベージュ。押せる部品・状態の地・画面全体の地には使わない（neutral-secondary を使う）"
+        },
+        "tertiary": {
+          "value": "Primitive-Wood-25",
+          "hex": "#FCF9F2",
+          "usage": "情報をまとめる押せない面（Section background=\"subtle\"・Alert 中立の地など）。light は secondary と同じベージュ。押せる部品・状態の地・溝には使わない（neutral-tertiary を使う）"
+        },
+        "neutral-secondary": {
           "value": "Primitive-Gray-50",
           "hex": "#FBF9F8",
-          "usage": "セカンダリ背景"
+          "usage": "グレーを保つ地。画面全体の地（AdminShell 等の min-h-screen）、hover / selected / disabled の地、画像・アバターの仮の地、ラベル部品"
         },
-        "tertiary": {
+        "neutral-tertiary": {
           "value": "Primitive-Gray-100",
           "hex": "#F4F2F1",
-          "usage": "ターシャリ背景"
+          "usage": "グレーを保つ地。Button tertiary・Chip・Badge 等の押せる部品とラベル、hover / active / disabled の地、溝・トラック・スケルトン"
         },
         "elevated": {
           "value": "Primitive-White-alpha-1000",
@@ -145,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",
@@ -221,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",
@@ -270,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契約値"
@@ -346,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)",
@@ -489,6 +510,14 @@
           "value": "var(--Primitive-White-alpha-200)",
           "usage": "Surface-Tertiary のCSS契約値"
         },
+        "neutral-secondary": {
+          "value": "var(--Primitive-White-alpha-100)",
+          "usage": "Surface-Neutral-Secondary のCSS契約値（dark は Surface-Secondary と同値）"
+        },
+        "neutral-tertiary": {
+          "value": "var(--Primitive-White-alpha-200)",
+          "usage": "Surface-Neutral-Tertiary のCSS契約値（dark は Surface-Tertiary と同値）"
+        },
         "elevated": {
           "value": "var(--Primitive-Gray-800)",
           "usage": "Surface-Elevated のCSS契約値"
@@ -513,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契約値"
@@ -707,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契約値"