@cakejp/design-system 0.13.0 → 0.14.1

package/tokens.json

@@ -3,59 +3,744 @@
   "version": "0.1.0",
   "description": "Cake.jp Design System — 機械可読トークン定義。AI がコンポーネント生成時に参照する。",
   "lastUpdated": "2026-03-17",
-
   "color": {
     "primitive": {
-      "Orange":  { "50": "#FFECD9", "100": "#FFD4B2", "200": "#FFBA84", "300": "#FFA66B", "400": "#FF8E4C", "500": "#F97732", "600": "#F16311", "700": "#E04B00", "800": "#BD3200", "900": "#A62700" },
-      "Gray":    { "50": "#FBF9F8", "100": "#F4F2F1", "200": "#EBE9E8", "300": "#DBD9D8", "400": "#B7B5B4", "500": "#979594", "600": "#787675", "700": "#575352", "800": "#3A3736", "900": "#1C1A1A" },
-      "Forest":  { "50": "#E6F5EC", "100": "#C2E5D1", "200": "#9BD4B5", "300": "#71C598", "400": "#51B883", "500": "#2CAC6E", "600": "#259D63", "700": "#1D8B56", "800": "#197A4B", "900": "#115A36" },
-      "Sun":     { "50": "#FFE7E6", "100": "#FFC8B8", "200": "#FFA28B", "300": "#FF7B5C", "400": "#FF5838", "500": "#FF4B36", "600": "#FF220D", "700": "#FA1606", "800": "#EC0000", "900": "#D50000" },
-      "Teal":    { "50": "#F0FCF8", "100": "#D0F6E9", "200": "#ACEED8", "300": "#81E6C4", "400": "#59D9AE", "500": "#51C79F", "600": "#49B18E", "700": "#3E987A", "800": "#317860", "900": "#1D4739" },
-      "Sea":     { "50": "#E8F1FE", "100": "#C5D7FB", "200": "#9DB7F9", "300": "#7096F8", "400": "#4979F5", "500": "#295FF3", "600": "#003EE5", "700": "#0031D8", "800": "#0024CE", "900": "#0017B6" },
-      "Wood":    { "50": "#F8F1E0", "100": "#EFDBB1", "200": "#E5C47F", "300": "#DCAC4D", "400": "#D69C2B", "500": "#D18D0F", "600": "#CD820A", "700": "#C87504", "800": "#C16800", "900": "#B65200" },
-      "Berry":   { "50": "#FBD4E0", "100": "#F7B1C8", "200": "#F491B2", "300": "#F1749E", "400": "#EE598B", "500": "#EC407A", "600": "#EA296A", "700": "#E5175C", "800": "#B5175C", "900": "#9E103F" }
+      "Orange": {
+        "50": "#FFECD9",
+        "100": "#FFD4B2",
+        "200": "#FFBA84",
+        "300": "#FFA66B",
+        "400": "#FF8E4C",
+        "500": "#F97732",
+        "600": "#F16311",
+        "700": "#E04B00",
+        "800": "#BD3200",
+        "900": "#A62700"
+      },
+      "Gray": {
+        "50": "#FBF9F8",
+        "100": "#F4F2F1",
+        "200": "#EBE9E8",
+        "300": "#DBD9D8",
+        "400": "#B7B5B4",
+        "500": "#979594",
+        "600": "#787675",
+        "700": "#575352",
+        "800": "#3A3736",
+        "900": "#1C1A1A"
+      },
+      "Forest": {
+        "50": "#E6F5EC",
+        "100": "#C2E5D1",
+        "200": "#9BD4B5",
+        "300": "#71C598",
+        "400": "#51B883",
+        "500": "#2CAC6E",
+        "600": "#259D63",
+        "700": "#1D8B56",
+        "800": "#197A4B",
+        "900": "#115A36"
+      },
+      "Sun": {
+        "50": "#FFE7E6",
+        "100": "#FFC8B8",
+        "200": "#FFA28B",
+        "300": "#FF7B5C",
+        "400": "#FF5838",
+        "500": "#FF4B36",
+        "600": "#FF220D",
+        "700": "#FA1606",
+        "800": "#EC0000",
+        "900": "#D50000"
+      },
+      "Teal": {
+        "50": "#F0FCF8",
+        "100": "#D0F6E9",
+        "200": "#ACEED8",
+        "300": "#81E6C4",
+        "400": "#59D9AE",
+        "500": "#51C79F",
+        "600": "#49B18E",
+        "700": "#3E987A",
+        "800": "#317860",
+        "900": "#1D4739"
+      },
+      "Sea": {
+        "50": "#E8F1FE",
+        "100": "#C5D7FB",
+        "200": "#9DB7F9",
+        "300": "#7096F8",
+        "400": "#4979F5",
+        "500": "#295FF3",
+        "600": "#003EE5",
+        "700": "#0031D8",
+        "800": "#0024CE",
+        "900": "#0017B6"
+      },
+      "Wood": {
+        "50": "#F8F1E0",
+        "100": "#EFDBB1",
+        "200": "#E5C47F",
+        "300": "#DCAC4D",
+        "400": "#D69C2B",
+        "500": "#D18D0F",
+        "600": "#CD820A",
+        "700": "#C87504",
+        "800": "#C16800",
+        "900": "#B65200"
+      },
+      "Berry": {
+        "50": "#FBD4E0",
+        "100": "#F7B1C8",
+        "200": "#F491B2",
+        "300": "#F1749E",
+        "400": "#EE598B",
+        "500": "#EC407A",
+        "600": "#EA296A",
+        "700": "#E5175C",
+        "800": "#B5175C",
+        "900": "#9E103F"
+      }
     },
-
     "semantic": {
       "surface": {
-        "primary":              { "value": "Primitive-White-alpha-1000", "hex": "#FFFFFF", "usage": "メイン背景" },
-        "secondary":            { "value": "Primitive-Gray-50",         "hex": "#FBF9F8", "usage": "セカンダリ背景" },
-        "tertiary":             { "value": "Primitive-Gray-100",        "hex": "#F4F2F1", "usage": "ターシャリ背景" },
-        "caution":              { "value": "Primitive-Sun-800",         "hex": "#EC0000", "usage": "エラー背景" },
-        "caution-light":        { "value": "Primitive-Sun-50",          "hex": "#FFE7E6", "usage": "エラー背景（薄）" },
-        "accent-primary":       { "value": "Primitive-Orange-700",      "hex": "#E04B00", "usage": "アクセント背景" },
-        "accent-primary-light": { "value": "Primitive-Orange-50",       "hex": "#FFECD9", "usage": "アクセント背景（薄）" },
-        "success":              { "value": "Primitive-Forest-600",      "hex": "#259D63", "usage": "成功背景" },
-        "warning":              { "value": "Primitive-Wood-50",         "hex": "#F8F1E0", "usage": "警告背景" },
-        "overlay-light":        { "value": "Primitive-White-alpha-800", "hex": "#FFFFFFCC", "usage": "画像上の半透過白サーフェス（Button overlay / カルーセル矢印）" },
-        "overlay-dark":         { "value": "Primitive-Gray-alpha-400",  "hex": "#00000066", "usage": "画像上の半透過黒サーフェス" }
+        "primary": {
+          "value": "Primitive-White-alpha-1000",
+          "hex": "#FFFFFF",
+          "usage": "メイン背景"
+        },
+        "secondary": {
+          "value": "Primitive-Gray-50",
+          "hex": "#FBF9F8",
+          "usage": "セカンダリ背景"
+        },
+        "tertiary": {
+          "value": "Primitive-Gray-100",
+          "hex": "#F4F2F1",
+          "usage": "ターシャリ背景"
+        },
+        "caution": {
+          "value": "Primitive-Sun-800",
+          "hex": "#EC0000",
+          "usage": "エラー背景"
+        },
+        "caution-light": {
+          "value": "Primitive-Sun-50",
+          "hex": "#FFE7E6",
+          "usage": "エラー背景（薄）"
+        },
+        "accent-primary": {
+          "value": "Primitive-Orange-700",
+          "hex": "#E04B00",
+          "usage": "アクセント背景"
+        },
+        "accent-primary-light": {
+          "value": "Primitive-Orange-50",
+          "hex": "#FFECD9",
+          "usage": "アクセント背景（薄）"
+        },
+        "success": {
+          "value": "Primitive-Forest-600",
+          "hex": "#259D63",
+          "usage": "成功背景"
+        },
+        "warning": {
+          "value": "Primitive-Wood-50",
+          "hex": "#F8F1E0",
+          "usage": "警告背景"
+        },
+        "overlay-light": {
+          "value": "Primitive-White-alpha-800",
+          "hex": "#FFFFFFCC",
+          "usage": "画像上の半透過白サーフェス（Button overlay / カルーセル矢印）"
+        },
+        "overlay-dark": {
+          "value": "Primitive-Gray-alpha-400",
+          "hex": "#00000066",
+          "usage": "画像上の半透過黒サーフェス"
+        },
+        "info": {
+          "value": "var(--Primitive-Sea-600)",
+          "usage": "Surface-Info のCSS契約値"
+        },
+        "info-light": {
+          "value": "var(--Primitive-Sea-50)",
+          "usage": "Surface-Info-Light のCSS契約値"
+        },
+        "glass": {
+          "value": "var(--Primitive-White-alpha-800)",
+          "usage": "Surface-Glass のCSS契約値"
+        },
+        "glass-soft": {
+          "value": "rgba(255, 255, 255, 0.76)",
+          "usage": "Surface-Glass-Soft のCSS契約値"
+        },
+        "glass-faint": {
+          "value": "var(--Primitive-White-alpha-700)",
+          "usage": "Surface-Glass-Faint のCSS契約値"
+        },
+        "brand-ghost": {
+          "value": "rgba(255, 236, 217, 0.7)",
+          "usage": "Surface-Brand-Ghost のCSS契約値"
+        }
+      },
+      "text": {
+        "high-emphasis": {
+          "value": "Primitive-Gray-900",
+          "hex": "#1C1A1A",
+          "usage": "本文テキスト"
+        },
+        "medium-emphasis": {
+          "value": "Primitive-Gray-700",
+          "hex": "#575352",
+          "usage": "補足テキスト"
+        },
+        "low-emphasis": {
+          "value": "Primitive-Gray-600",
+          "hex": "#787675",
+          "usage": "プレースホルダ"
+        },
+        "disable": {
+          "value": "Primitive-Gray-400",
+          "hex": "#B7B5B4",
+          "usage": "無効状態"
+        },
+        "accent-primary": {
+          "value": "Brand-Cake-Orange",
+          "hex": "#E04B00",
+          "usage": "アクセントテキスト"
+        },
+        "on-inverse": {
+          "value": "Primitive-White-alpha-1000",
+          "hex": "#FFFFFF",
+          "usage": "反転背景上の白文字"
+        },
+        "success": {
+          "value": "Primitive-Forest-600",
+          "hex": "#259D63",
+          "usage": "成功状態"
+        },
+        "caution": {
+          "value": "Primitive-Sun-800",
+          "hex": "#EC0000",
+          "usage": "エラー状態"
+        },
+        "warning": {
+          "value": "Primitive-Wood-800",
+          "hex": "#C16800",
+          "usage": "警告状態"
+        },
+        "accent-secondary": {
+          "value": "var(--Primitive-Orange-200)",
+          "usage": "Text-Accent-Secondary のCSS契約値"
+        },
+        "info": {
+          "value": "var(--Primitive-Sea-600)",
+          "usage": "Text-Info のCSS契約値"
+        }
+      },
+      "border": {
+        "high-emphasis": {
+          "value": "Primitive-Gray-700",
+          "hex": "#575352",
+          "usage": "強調ボーダー"
+        },
+        "medium-emphasis": {
+          "value": "Primitive-Gray-300",
+          "hex": "#DBD9D8",
+          "usage": "標準ボーダー"
+        },
+        "low-emphasis": {
+          "value": "Primitive-Gray-50",
+          "hex": "#FBF9F8",
+          "usage": "薄いボーダー"
+        },
+        "accent-primary": {
+          "value": "Brand-Cake-Orange",
+          "hex": "#E04B00",
+          "usage": "アクセントボーダー"
+        },
+        "caution": {
+          "value": "Surface-Caution",
+          "hex": "#EC0000",
+          "usage": "エラーボーダー"
+        },
+        "favorite": {
+          "value": "var(--Brand-Cake-Orange)",
+          "usage": "Border-Favorite のCSS契約値"
+        },
+        "info": {
+          "value": "var(--Primitive-Sea-600)",
+          "usage": "Border-Info のCSS契約値"
+        },
+        "hairline": {
+          "value": "rgba(28, 26, 26, 0.08)",
+          "usage": "Border-Hairline のCSS契約値"
+        },
+        "brand-subtle": {
+          "value": "rgba(224, 75, 0, 0.16)",
+          "usage": "Border-Brand-Subtle のCSS契約値"
+        }
+      },
+      "brand": {
+        "cake-orange": {
+          "value": "Primitive-Orange-700",
+          "hex": "#E04B00",
+          "usage": "ブランドカラー"
+        },
+        "cake-orange-light": {
+          "value": "Primitive-Orange-100",
+          "hex": "#FFD4B2",
+          "usage": "ブランド薄色"
+        },
+        "cake-orange-ultra-light": {
+          "value": "Primitive-Orange-50",
+          "hex": "#FFECD9",
+          "usage": "ブランド最薄色"
+        }
+      },
+      "object": {
+        "favorite": {
+          "value": "var(--Brand-Cake-Orange)",
+          "usage": "Object-Favorite のCSS契約値"
+        },
+        "accent-primary": {
+          "value": "var(--Brand-Cake-Orange)",
+          "usage": "Object-Accent-Primary のCSS契約値"
+        },
+        "accent-primary-light": {
+          "value": "var(--Brand-Cake-Orange-Ultra-Light)",
+          "usage": "Object-Accent-Primary-Light のCSS契約値"
+        },
+        "high-emphasis": {
+          "value": "var(--Primitive-Gray-900)",
+          "usage": "Object-High-Emphasis のCSS契約値"
+        },
+        "medium-emphasis": {
+          "value": "var(--Primitive-Gray-700)",
+          "usage": "Object-Medium-Emphasis のCSS契約値"
+        },
+        "low-emphasis": {
+          "value": "var(--Primitive-Gray-600)",
+          "usage": "Object-Low-Emphasis のCSS契約値"
+        },
+        "disable": {
+          "value": "var(--Primitive-Gray-400)",
+          "usage": "Object-Disable のCSS契約値"
+        },
+        "high-emphasis-on-inverse": {
+          "value": "var(--Primitive-White-alpha-1000)",
+          "usage": "Object-High-Emphasis-on-Inverse のCSS契約値"
+        },
+        "caution": {
+          "value": "var(--Primitive-Sun-800)",
+          "usage": "Object-Caution のCSS契約値"
+        },
+        "warning": {
+          "value": "var(--Primitive-Wood-800)",
+          "usage": "Object-Warning のCSS契約値"
+        },
+        "success": {
+          "value": "var(--Primitive-Forest-600)",
+          "usage": "Object-Success のCSS契約値"
+        },
+        "info": {
+          "value": "var(--Primitive-Sea-600)",
+          "usage": "Object-Info のCSS契約値"
+        }
+      },
+      "hover": {
+        "primary-button": {
+          "value": "var(--Primitive-Orange-800)",
+          "usage": "Hover-Primary-Button のCSS契約値"
+        },
+        "secondary-button": {
+          "value": "var(--Primitive-Orange-100)",
+          "usage": "Hover-Secondary-Button のCSS契約値"
+        },
+        "tertiary-button": {
+          "value": "var(--Primitive-Gray-200)",
+          "usage": "Hover-Tertiary-Button のCSS契約値"
+        },
+        "text-button": {
+          "value": "var(--Primitive-Gray-200)",
+          "usage": "Hover-Text-Button のCSS契約値"
+        },
+        "caution-button": {
+          "value": "var(--Primitive-Sun-100)",
+          "usage": "Hover-Caution-Button のCSS契約値"
+        }
+      },
+      "active": {
+        "primary-button": {
+          "value": "var(--Primitive-Orange-800)",
+          "usage": "Active-Primary-Button のCSS契約値"
+        },
+        "secondary-button": {
+          "value": "var(--Primitive-Orange-100)",
+          "usage": "Active-Secondary-Button のCSS契約値"
+        },
+        "tertiary-button": {
+          "value": "var(--Primitive-Gray-200)",
+          "usage": "Active-Tertiary-Button のCSS契約値"
+        },
+        "text-button": {
+          "value": "var(--Primitive-Gray-100)",
+          "usage": "Active-Text-Button のCSS契約値"
+        },
+        "caution-button": {
+          "value": "var(--Primitive-Sun-100)",
+          "usage": "Active-Caution-Button のCSS契約値"
+        }
+      },
+      "overlay": {
+        "dark": {
+          "value": "var(--Primitive-Gray-alpha-800)",
+          "usage": "Overlay-Dark のCSS契約値"
+        },
+        "medium": {
+          "value": "var(--Primitive-Gray-alpha-600)",
+          "usage": "Overlay-Medium のCSS契約値"
+        },
+        "light": {
+          "value": "var(--Primitive-Gray-alpha-200)",
+          "usage": "Overlay-Light のCSS契約値"
+        },
+        "scrim": {
+          "value": "rgba(17, 17, 17, 0.28)",
+          "usage": "Overlay-Scrim のCSS契約値"
+        }
+      },
+      "caution": {
+        "base": {
+          "value": "var(--Primitive-Sun-800)",
+          "usage": "Caution-Base のCSS契約値"
+        },
+        "light": {
+          "value": "var(--Primitive-Sun-200)",
+          "usage": "Caution-Light のCSS契約値"
+        },
+        "ultra-light": {
+          "value": "var(--Primitive-Sun-50)",
+          "usage": "Caution-Ultra-Light のCSS契約値"
+        }
+      },
+      "focus": {
+        "high-emphasis": {
+          "value": "#0C9E66FF",
+          "usage": "Focus-High-Emphasis のCSS契約値"
+        }
+      },
+      "thirdParty": {
+        "youtube": {
+          "value": "#FF0000FF",
+          "usage": "Third-Party-Youtube のCSS契約値"
+        },
+        "facebook": {
+          "value": "#1877F2FF",
+          "usage": "Third-Party-Facebook のCSS契約値"
+        },
+        "twitter": {
+          "value": "#1DA1F2FF",
+          "usage": "Third-Party-Twitter のCSS契約値"
+        },
+        "instagram-pink": {
+          "value": "#F20076FF",
+          "usage": "Third-Party-Instagram-Pink のCSS契約値"
+        },
+        "amazon": {
+          "value": "#FAD676FF",
+          "usage": "Third-Party-Amazon のCSS契約値"
+        },
+        "line": {
+          "value": "#06C755FF",
+          "usage": "Third-Party-LINE のCSS契約値"
+        },
+        "apple": {
+          "value": "#000000FF",
+          "usage": "Third-Party-Apple のCSS契約値"
+        },
+        "x": {
+          "value": "#000000FF",
+          "usage": "Third-Party-X のCSS契約値"
+        }
+      }
+    },
+    "semanticDark": {
+      "surface": {
+        "primary": {
+          "value": "var(--Primitive-Gray-alpha-900)",
+          "usage": "Surface-Primary のCSS契約値"
+        },
+        "secondary": {
+          "value": "var(--Primitive-White-alpha-100)",
+          "usage": "Surface-Secondary のCSS契約値"
+        },
+        "tertiary": {
+          "value": "var(--Primitive-White-alpha-200)",
+          "usage": "Surface-Tertiary のCSS契約値"
+        },
+        "caution": {
+          "value": "var(--Primitive-Sun-800)",
+          "usage": "Surface-Caution のCSS契約値"
+        },
+        "caution-light": {
+          "value": "var(--Primitive-Sun-50)",
+          "usage": "Surface-Caution-Light のCSS契約値"
+        },
+        "accent-primary": {
+          "value": "var(--Primitive-Orange-700)",
+          "usage": "Surface-Accent-Primary のCSS契約値"
+        },
+        "accent-primary-light": {
+          "value": "#E04B0026",
+          "usage": "Surface-Accent-Primary-Light のCSS契約値"
+        },
+        "success": {
+          "value": "var(--Primitive-Forest-600)",
+          "usage": "Surface-Success のCSS契約値"
+        },
+        "warning": {
+          "value": "var(--Primitive-Wood-50)",
+          "usage": "Surface-Warning のCSS契約値"
+        },
+        "info": {
+          "value": "var(--Primitive-Sea-600)",
+          "usage": "Surface-Info のCSS契約値"
+        },
+        "info-light": {
+          "value": "var(--Primitive-Sea-50)",
+          "usage": "Surface-Info-Light のCSS契約値"
+        },
+        "glass": {
+          "value": "var(--Primitive-White-alpha-100)",
+          "usage": "Surface-Glass のCSS契約値"
+        },
+        "glass-soft": {
+          "value": "var(--Primitive-White-alpha-100)",
+          "usage": "Surface-Glass-Soft のCSS契約値"
+        },
+        "glass-faint": {
+          "value": "var(--Primitive-White-alpha-50)",
+          "usage": "Surface-Glass-Faint のCSS契約値"
+        },
+        "brand-ghost": {
+          "value": "rgba(224, 75, 0, 0.12)",
+          "usage": "Surface-Brand-Ghost のCSS契約値"
+        }
       },
       "text": {
-        "high-emphasis":    { "value": "Primitive-Gray-900",  "hex": "#1C1A1A", "usage": "本文テキスト" },
-        "medium-emphasis":  { "value": "Primitive-Gray-700",  "hex": "#575352", "usage": "補足テキスト" },
-        "low-emphasis":     { "value": "Primitive-Gray-600",  "hex": "#787675", "usage": "プレースホルダ" },
-        "disable":          { "value": "Primitive-Gray-400",  "hex": "#B7B5B4", "usage": "無効状態" },
-        "accent-primary":   { "value": "Brand-Cake-Orange",   "hex": "#E04B00", "usage": "アクセントテキスト" },
-        "on-inverse":       { "value": "Primitive-White-alpha-1000", "hex": "#FFFFFF", "usage": "反転背景上の白文字" },
-        "success":          { "value": "Primitive-Forest-600", "hex": "#259D63", "usage": "成功状態" },
-        "caution":          { "value": "Primitive-Sun-800",    "hex": "#EC0000", "usage": "エラー状態" },
-        "warning":          { "value": "Primitive-Wood-800",   "hex": "#C16800", "usage": "警告状態" }
+        "high-emphasis": {
+          "value": "var(--Primitive-White-alpha-1000)",
+          "usage": "Text-High-Emphasis のCSS契約値"
+        },
+        "medium-emphasis": {
+          "value": "var(--Primitive-White-alpha-800)",
+          "usage": "Text-Medium-Emphasis のCSS契約値"
+        },
+        "low-emphasis": {
+          "value": "var(--Primitive-White-alpha-600)",
+          "usage": "Text-Low-Emphasis のCSS契約値"
+        },
+        "disable": {
+          "value": "var(--Primitive-White-alpha-300)",
+          "usage": "Text-Disable のCSS契約値"
+        },
+        "accent-primary": {
+          "value": "var(--Primitive-Orange-600)",
+          "usage": "Text-Accent-Primary のCSS契約値"
+        },
+        "accent-secondary": {
+          "value": "var(--Primitive-Orange-100)",
+          "usage": "Text-Accent-Secondary のCSS契約値"
+        },
+        "on-inverse": {
+          "value": "var(--Primitive-White-alpha-1000)",
+          "usage": "Text-on-Inverse のCSS契約値"
+        },
+        "success": {
+          "value": "var(--Primitive-Forest-600)",
+          "usage": "Text-Success のCSS契約値"
+        },
+        "caution": {
+          "value": "var(--Primitive-Sun-400)",
+          "usage": "Text-Caution のCSS契約値"
+        },
+        "warning": {
+          "value": "var(--Primitive-Wood-800)",
+          "usage": "Text-Warning のCSS契約値"
+        },
+        "info": {
+          "value": "var(--Primitive-Sea-400)",
+          "usage": "Text-Info のCSS契約値"
+        }
+      },
+      "object": {
+        "favorite": {
+          "value": "var(--Primitive-Orange-600)",
+          "usage": "Object-Favorite のCSS契約値"
+        },
+        "accent-primary": {
+          "value": "var(--Primitive-Orange-600)",
+          "usage": "Object-Accent-Primary のCSS契約値"
+        },
+        "accent-primary-light": {
+          "value": "var(--Brand-Cake-Orange-Ultra-Light)",
+          "usage": "Object-Accent-Primary-Light のCSS契約値"
+        },
+        "high-emphasis": {
+          "value": "var(--Primitive-White-alpha-1000)",
+          "usage": "Object-High-Emphasis のCSS契約値"
+        },
+        "medium-emphasis": {
+          "value": "var(--Primitive-White-alpha-800)",
+          "usage": "Object-Medium-Emphasis のCSS契約値"
+        },
+        "low-emphasis": {
+          "value": "var(--Primitive-White-alpha-600)",
+          "usage": "Object-Low-Emphasis のCSS契約値"
+        },
+        "disable": {
+          "value": "var(--Primitive-White-alpha-400)",
+          "usage": "Object-Disable のCSS契約値"
+        },
+        "high-emphasis-on-inverse": {
+          "value": "var(--Primitive-White-alpha-1000)",
+          "usage": "Object-High-Emphasis-on-Inverse のCSS契約値"
+        },
+        "caution": {
+          "value": "var(--Caution-Light)",
+          "usage": "Object-Caution のCSS契約値"
+        },
+        "warning": {
+          "value": "var(--Primitive-Wood-800)",
+          "usage": "Object-Warning のCSS契約値"
+        },
+        "success": {
+          "value": "var(--Primitive-Forest-600)",
+          "usage": "Object-Success のCSS契約値"
+        },
+        "info": {
+          "value": "var(--Primitive-Sea-400)",
+          "usage": "Object-Info のCSS契約値"
+        }
+      },
+      "hover": {
+        "primary-button": {
+          "value": "var(--Primitive-Orange-800)",
+          "usage": "Hover-Primary-Button のCSS契約値"
+        },
+        "secondary-button": {
+          "value": "var(--Primitive-White-alpha-100)",
+          "usage": "Hover-Secondary-Button のCSS契約値"
+        },
+        "tertiary-button": {
+          "value": "var(--Primitive-White-alpha-50)",
+          "usage": "Hover-Tertiary-Button のCSS契約値"
+        },
+        "text-button": {
+          "value": "var(--Primitive-White-alpha-200)",
+          "usage": "Hover-Text-Button のCSS契約値"
+        },
+        "caution-button": {
+          "value": "var(--Primitive-Sun-50)",
+          "usage": "Hover-Caution-Button のCSS契約値"
+        }
+      },
+      "active": {
+        "primary-button": {
+          "value": "var(--Primitive-Orange-800)",
+          "usage": "Active-Primary-Button のCSS契約値"
+        },
+        "secondary-button": {
+          "value": "var(--Primitive-White-alpha-100)",
+          "usage": "Active-Secondary-Button のCSS契約値"
+        },
+        "tertiary-button": {
+          "value": "var(--Primitive-White-alpha-50)",
+          "usage": "Active-Tertiary-Button のCSS契約値"
+        },
+        "text-button": {
+          "value": "var(--Primitive-White-alpha-100)",
+          "usage": "Active-Text-Button のCSS契約値"
+        },
+        "caution-button": {
+          "value": "var(--Primitive-Sun-50)",
+          "usage": "Active-Caution-Button のCSS契約値"
+        }
       },
       "border": {
-        "high-emphasis":   { "value": "Primitive-Gray-700",  "hex": "#575352", "usage": "強調ボーダー" },
-        "medium-emphasis": { "value": "Primitive-Gray-300",  "hex": "#DBD9D8", "usage": "標準ボーダー" },
-        "low-emphasis":    { "value": "Primitive-Gray-50",   "hex": "#FBF9F8", "usage": "薄いボーダー" },
-        "accent-primary":  { "value": "Brand-Cake-Orange",   "hex": "#E04B00", "usage": "アクセントボーダー" },
-        "caution":         { "value": "Surface-Caution",     "hex": "#EC0000", "usage": "エラーボーダー" }
+        "high-emphasis": {
+          "value": "var(--Primitive-White-alpha-500)",
+          "usage": "Border-High-Emphasis のCSS契約値"
+        },
+        "medium-emphasis": {
+          "value": "var(--Primitive-White-alpha-200)",
+          "usage": "Border-Medium-Emphasis のCSS契約値"
+        },
+        "low-emphasis": {
+          "value": "var(--Primitive-White-alpha-50)",
+          "usage": "Border-Low-Emphasis のCSS契約値"
+        },
+        "accent-primary": {
+          "value": "var(--Primitive-Orange-600)",
+          "usage": "Border-Accent-Primary のCSS契約値"
+        },
+        "favorite": {
+          "value": "var(--Primitive-Orange-600)",
+          "usage": "Border-Favorite のCSS契約値"
+        },
+        "caution": {
+          "value": "var(--Surface-Caution)",
+          "usage": "Border-Caution のCSS契約値"
+        },
+        "info": {
+          "value": "var(--Primitive-Sea-400)",
+          "usage": "Border-Info のCSS契約値"
+        },
+        "hairline": {
+          "value": "var(--Primitive-White-alpha-100)",
+          "usage": "Border-Hairline のCSS契約値"
+        },
+        "brand-subtle": {
+          "value": "rgba(224, 75, 0, 0.24)",
+          "usage": "Border-Brand-Subtle のCSS契約値"
+        }
       },
       "brand": {
-        "cake-orange":            { "value": "Primitive-Orange-700", "hex": "#E04B00", "usage": "ブランドカラー" },
-        "cake-orange-light":      { "value": "Primitive-Orange-100", "hex": "#FFD4B2", "usage": "ブランド薄色" },
-        "cake-orange-ultra-light": { "value": "Primitive-Orange-50",  "hex": "#FFECD9", "usage": "ブランド最薄色" }
+        "cake-orange": {
+          "value": "var(--Primitive-Orange-700)",
+          "usage": "Brand-Cake-Orange のCSS契約値"
+        },
+        "cake-orange-light": {
+          "value": "var(--Primitive-Orange-100)",
+          "usage": "Brand-Cake-Orange-Light のCSS契約値"
+        },
+        "cake-orange-ultra-light": {
+          "value": "var(--Primitive-Orange-50)",
+          "usage": "Brand-Cake-Orange-Ultra-Light のCSS契約値"
+        }
+      },
+      "overlay": {
+        "dark": {
+          "value": "var(--Primitive-White-alpha-300)",
+          "usage": "Overlay-Dark のCSS契約値"
+        },
+        "medium": {
+          "value": "var(--Primitive-White-alpha-200)",
+          "usage": "Overlay-Medium のCSS契約値"
+        },
+        "light": {
+          "value": "var(--Primitive-White-alpha-100)",
+          "usage": "Overlay-Light のCSS契約値"
+        },
+        "scrim": {
+          "value": "rgba(0, 0, 0, 0.48)",
+          "usage": "Overlay-Scrim のCSS契約値"
+        }
       }
     }
   },
-
   "typography": {
     "heading": {
       "5xl": {
@@ -72,24 +757,102 @@
         "fontWeight": 700,
         "usage": "LP・マーケティング系ヒーローの PC 見出し（5xlより抑えた表現）。通常ページでは使わない"
       },
-      "3xl": { "fontSize": "28px", "lineHeight": 1.5, "letterSpacing": "0.04em", "fontWeight": 700, "usage": "通常ページの主見出し・ページタイトル。LPではSP側のヒーロー見出しにも使用" },
-      "2xl": { "fontSize": "24px", "lineHeight": 1.5, "letterSpacing": "0.04em", "fontWeight": 700, "usage": "主要セクション見出し" },
-      "xl":  { "fontSize": "21px", "lineHeight": 1.5, "letterSpacing": "0.04em", "fontWeight": 700, "usage": "サブセクション見出し" },
-      "lg":  { "fontSize": "18px", "lineHeight": 1.5, "letterSpacing": "0.04em", "fontWeight": 700, "usage": "グループ見出し" },
-      "md":  { "fontSize": "16px", "lineHeight": 1.5, "letterSpacing": "0.04em", "fontWeight": 700, "usage": "小見出し" },
-      "sm":  { "fontSize": "14px", "lineHeight": 1.5, "letterSpacing": "0.04em", "fontWeight": 700, "usage": "ラベル的見出し" }
+      "3xl": {
+        "fontSize": "28px",
+        "lineHeight": 1.5,
+        "letterSpacing": "0.04em",
+        "fontWeight": 700,
+        "usage": "通常ページの主見出し・ページタイトル。LPではSP側のヒーロー見出しにも使用"
+      },
+      "2xl": {
+        "fontSize": "24px",
+        "lineHeight": 1.5,
+        "letterSpacing": "0.04em",
+        "fontWeight": 700,
+        "usage": "主要セクション見出し"
+      },
+      "xl": {
+        "fontSize": "21px",
+        "lineHeight": 1.5,
+        "letterSpacing": "0.04em",
+        "fontWeight": 700,
+        "usage": "サブセクション見出し"
+      },
+      "lg": {
+        "fontSize": "18px",
+        "lineHeight": 1.5,
+        "letterSpacing": "0.04em",
+        "fontWeight": 700,
+        "usage": "グループ見出し"
+      },
+      "md": {
+        "fontSize": "16px",
+        "lineHeight": 1.5,
+        "letterSpacing": "0.04em",
+        "fontWeight": 700,
+        "usage": "小見出し"
+      },
+      "sm": {
+        "fontSize": "14px",
+        "lineHeight": 1.5,
+        "letterSpacing": "0.04em",
+        "fontWeight": 700,
+        "usage": "ラベル的見出し"
+      }
     },
     "body": {
-      "lg": { "fontSize": "16px", "lineHeight": 1.75, "fontWeight": 400, "usage": "本文テキスト（大）" },
-      "md": { "fontSize": "14px", "lineHeight": 1.75, "fontWeight": 400, "usage": "本文テキスト（標準）" },
-      "sm": { "fontSize": "12px", "lineHeight": 1.5,  "fontWeight": 400, "usage": "補足テキスト" },
-      "xs": { "fontSize": "10px", "lineHeight": 1.5,  "fontWeight": 400, "usage": "最小テキスト" }
+      "lg": {
+        "fontSize": "16px",
+        "lineHeight": 1.75,
+        "fontWeight": 400,
+        "usage": "本文テキスト（大）"
+      },
+      "md": {
+        "fontSize": "14px",
+        "lineHeight": 1.75,
+        "fontWeight": 400,
+        "usage": "本文テキスト（標準）"
+      },
+      "sm": {
+        "fontSize": "12px",
+        "lineHeight": 1.5,
+        "fontWeight": 400,
+        "usage": "補足テキスト"
+      },
+      "xs": {
+        "fontSize": "10px",
+        "lineHeight": 1.5,
+        "fontWeight": 400,
+        "usage": "最小テキスト"
+      }
     },
     "label": {
-      "lg": { "fontSize": "16px", "lineHeight": 1.5, "letterSpacing": "0.04em", "fontWeight": 700, "usage": "ボタン大・CTA" },
-      "md": { "fontSize": "14px", "lineHeight": 1.5, "letterSpacing": "0.04em", "fontWeight": 700, "usage": "ボタン標準・ナビ" },
-      "sm": { "fontSize": "12px", "lineHeight": 1.5, "fontWeight": 500, "usage": "タグ・バッジ・メタ情報" },
-      "xs": { "fontSize": "10px", "lineHeight": 1.5, "fontWeight": 500, "usage": "小タグ・税表記" }
+      "lg": {
+        "fontSize": "16px",
+        "lineHeight": 1.5,
+        "letterSpacing": "0.04em",
+        "fontWeight": 700,
+        "usage": "ボタン大・CTA"
+      },
+      "md": {
+        "fontSize": "14px",
+        "lineHeight": 1.5,
+        "letterSpacing": "0.04em",
+        "fontWeight": 700,
+        "usage": "ボタン標準・ナビ"
+      },
+      "sm": {
+        "fontSize": "12px",
+        "lineHeight": 1.5,
+        "fontWeight": 500,
+        "usage": "タグ・バッジ・メタ情報"
+      },
+      "xs": {
+        "fontSize": "10px",
+        "lineHeight": 1.5,
+        "fontWeight": 500,
+        "usage": "小タグ・税表記"
+      }
     },
     "cssClass": "typo-{category}-{size}",
     "rules": [
@@ -100,46 +863,123 @@
       "CVA 内でも typo-* を使用する"
     ]
   },
-
   "spacing": {
     "base": "4px",
     "grid": "8px",
     "scale": {
-      "0.5": { "px": 2,  "usage": "密接した要素間" },
-      "1":   { "px": 4,  "usage": "アイコンとラベル間" },
-      "1.5": { "px": 6,  "usage": "チップ間・タグ間" },
-      "2":   { "px": 8,  "usage": "標準要素間" },
-      "3":   { "px": 12, "usage": "セクション内要素間" },
-      "4":   { "px": 16, "usage": "セクション間" },
-      "6":   { "px": 24, "usage": "ダイアログ内パディング" }
+      "1": {
+        "px": 4,
+        "usage": "アイコンとラベル間"
+      },
+      "2": {
+        "px": 8,
+        "usage": "標準要素間"
+      },
+      "3": {
+        "px": 12,
+        "usage": "セクション内要素間"
+      },
+      "4": {
+        "px": 16,
+        "usage": "セクション間"
+      },
+      "6": {
+        "px": 24,
+        "usage": "ダイアログ内パディング"
+      },
+      "0.5": {
+        "px": 2,
+        "usage": "密接した要素間"
+      },
+      "1.5": {
+        "px": 6,
+        "usage": "チップ間・タグ間"
+      }
     },
     "section": {
       "comment": "セクション縦リズム tier（8の倍数）。preset.css の --Space-Section-* に対応。Section プリミティブが SP/PC ペアで消費する。scale(最大24px) を超える領域専用",
-      "xs":  { "px": 32, "var": "--Space-Section-xs",  "usage": "セクション間ギャップSP / カード上下" },
-      "sm":  { "px": 40, "var": "--Space-Section-sm",  "usage": "セクションpadding SP" },
-      "md":  { "px": 48, "var": "--Space-Section-md",  "usage": "Final CTA 上" },
-      "lg":  { "px": 56, "var": "--Space-Section-lg",  "usage": "セクションpadding PC" },
-      "xl":  { "px": 64, "var": "--Space-Section-xl",  "usage": "HERO上下 / Final CTA下SP" },
-      "2xl": { "px": 80, "var": "--Space-Section-2xl", "usage": "Final CTA下PC" }
+      "xs": {
+        "px": 32,
+        "var": "--Space-Section-xs",
+        "usage": "セクション間ギャップSP / カード上下"
+      },
+      "sm": {
+        "px": 40,
+        "var": "--Space-Section-sm",
+        "usage": "セクションpadding SP"
+      },
+      "md": {
+        "px": 48,
+        "var": "--Space-Section-md",
+        "usage": "Final CTA 上"
+      },
+      "lg": {
+        "px": 56,
+        "var": "--Space-Section-lg",
+        "usage": "セクションpadding PC"
+      },
+      "xl": {
+        "px": 64,
+        "var": "--Space-Section-xl",
+        "usage": "HERO上下 / Final CTA下SP"
+      },
+      "2xl": {
+        "px": 80,
+        "var": "--Space-Section-2xl",
+        "usage": "Final CTA下PC"
+      }
     }
   },
-
   "breakpoints": {
     "comment": "役割は二層。(1) 切替段=md / lg の2つだけ（値は本番 cakejp.css の境界に一致させた正本。レイアウトの変形はこの2段でのみ行う）。(2) 上限段=xl（1280。「切替段」ではなく DS が定めるコンテンツ幅の上限段。本番に 1280 の切替段は無い＝1025/1441 はある）。DS 内部はコンテナクエリ @md: / @lg: / @xl:（preset.css の --container-md / --container-lg / --container-xl）で参照し、生 CSS ではこの px 値をメディアクエリに直書きする（CSS 変数はメディアクエリに使えないため、値の配布は本トークンが担う）。独自のブレイクポイント値を発明しない",
-    "md": { "px": 768, "rem": "48rem", "container": "--container-md", "role": "切替段", "usage": "SP/PC 境界。767px 以下=SP / 768px 以上=PC。本番 cakejp.css の max-width:767px / min-width:768px と一致" },
-    "lg": { "px": 960, "rem": "60rem", "container": "--container-lg", "role": "切替段", "usage": "PC 中段。本番 cakejp.css の min-width:960px 段と一致" },
-    "xl": { "px": 1280, "rem": "80rem", "container": "--container-xl", "role": "上限段", "usage": "コンテンツ上限段（切替段ではない）。ページコンテナの標準上限で、1280px 以上では原則レイアウト変形を追加しない。本番 cakejp.css に 1280 の切替段は無い（1025 / 1441 はある）——DS が定める標準上限。実例: MypageShell の PC グリッド max-w-[1280px]" }
+    "md": {
+      "px": 768,
+      "rem": "48rem",
+      "container": "--container-md",
+      "role": "切替段",
+      "usage": "SP/PC 境界。767px 以下=SP / 768px 以上=PC。本番 cakejp.css の max-width:767px / min-width:768px と一致"
+    },
+    "lg": {
+      "px": 960,
+      "rem": "60rem",
+      "container": "--container-lg",
+      "role": "切替段",
+      "usage": "PC 中段。本番 cakejp.css の min-width:960px 段と一致"
+    },
+    "xl": {
+      "px": 1280,
+      "rem": "80rem",
+      "container": "--container-xl",
+      "role": "上限段",
+      "usage": "コンテンツ上限段（切替段ではない）。ページコンテナの標準上限で、1280px 以上では原則レイアウト変形を追加しない。本番 cakejp.css に 1280 の切替段は無い（1025 / 1441 はある）——DS が定める標準上限。実例: MypageShell の PC グリッド max-w-[1280px]"
+    }
   },
-
   "touchTarget": {
-    "button-cta":    { "min": "40px", "recommended": "48px" },
-    "icon-button":   { "min": "40px", "recommended": "44px" },
-    "text-input":    { "min": "44px", "recommended": "48px" },
-    "chip":          { "min": "32px", "recommended": "36px" },
-    "dropdown-item": { "min": "36px", "recommended": "40px" },
-    "nav-item":      { "min": "44px", "recommended": "48px" }
+    "button-cta": {
+      "min": "40px",
+      "recommended": "48px"
+    },
+    "icon-button": {
+      "min": "40px",
+      "recommended": "44px"
+    },
+    "text-input": {
+      "min": "44px",
+      "recommended": "48px"
+    },
+    "chip": {
+      "min": "32px",
+      "recommended": "36px"
+    },
+    "dropdown-item": {
+      "min": "36px",
+      "recommended": "40px"
+    },
+    "nav-item": {
+      "min": "44px",
+      "recommended": "48px"
+    }
   },
-
   "radius": {
     "sm": "calc(var(--radius) - 4px)",
     "md": "calc(var(--radius) - 2px)",
@@ -151,14 +991,13 @@
     "base": "0.625rem",
     "_comment": "--radius=10px 基準。px換算: sm=6 md=8 lg=10 xl=14 2xl=18 3xl=22 4xl=26。利用可は xs(2,Tailwind既定)〜2xl + full。3xl/4xl は定義のみで利用禁止（rules.json AI7）"
   },
-
   "shadow": {
-    "md":      "0px 7px 7px 0px rgba(0, 0, 0, 0.07), 0px 2px 16px 0px rgba(0, 0, 0, 0.12)",
-    "lg":      "0px 12px 32px -4px rgba(24, 39, 75, 0.12), 0px 8px 16px -6px rgba(24, 39, 75, 0.12), 0px 1px 4px 1px rgba(0, 0, 0, 0.2)",
-    "menu":    "var(--shadow-md)",
+    "md": "0px 7px 7px 0px rgba(0, 0, 0, 0.07), 0px 2px 16px 0px rgba(0, 0, 0, 0.12)",
+    "lg": "0px 12px 32px -4px rgba(24, 39, 75, 0.12), 0px 8px 16px -6px rgba(24, 39, 75, 0.12), 0px 1px 4px 1px rgba(0, 0, 0, 0.2)",
+    "menu": "var(--shadow-md)",
     "tooltip": "0px 8px 8px -4px rgba(24, 39, 75, 0.08), 0px 4px 6px -4px rgba(24, 39, 75, 0.12)",
-    "dialog":  "var(--shadow-lg)",
-    "modal":   "var(--shadow-lg)",
+    "dialog": "var(--shadow-lg)",
+    "modal": "var(--shadow-lg)",
     "overlay": "0 24px 80px rgba(24, 39, 75, 0.16)",
     "_comment": "preset.css の --shadow-* と同期（正）。md/lg は Tailwind 既定を DS 値に再定義済み。xl/2xl は使用禁止（rules.json R53）"
   }