@cakejp/design-system 0.21.1 → 0.22.1

package/dist/index.js

@@ -1144,10 +1144,10 @@ export {
 //       <div className="flex items-center gap-2 bg-[var(--Surface-Accent-Primary-Light)] rounded-lg px-3 py-2">
 //         <Calendar
 //           size={16}
-//           className="text-[var(--Brand-Cake-Orange)]"
+//           className="text-[var(--Text-Accent-Primary)]"
 //           aria-hidden="true"
 //         />
-//         <span className="typo-label-md text-[var(--Brand-Cake-Orange)]">
+//         <span className="typo-label-md text-[var(--Text-Accent-Primary)]">
 //           あと{daysLeft}日
 //         </span>
 //       </div>
@@ -6933,7 +6933,7 @@ export {
 //         default:
 //           "bg-[var(--Brand-Cake-Orange)] text-[var(--Text-on-Inverse)] hover:bg-[var(--Hover-Primary-Button)] active:bg-[var(--Active-Primary-Button)] disabled:bg-[var(--Surface-Tertiary)] disabled:text-[var(--Text-Disable)]",
 //         secondary:
-//           "border border-transparent outline outline-2 outline-transparent bg-[var(--Surface-Accent-Primary-Light)] text-[var(--Brand-Cake-Orange)] hover:border-[var(--Hover-Primary-Button)] hover:outline-[var(--Hover-Primary-Button)] hover:bg-[var(--Hover-Secondary-Button)] hover:text-[var(--Hover-Primary-Button)] active:border-[var(--Active-Primary-Button)] active:outline-[var(--Active-Primary-Button)] active:bg-[var(--Active-Secondary-Button)] active:text-[var(--Active-Primary-Button)] disabled:border-transparent disabled:outline-transparent disabled:bg-[var(--Surface-Tertiary)] disabled:text-[var(--Text-Disable)]",
+//           "border border-transparent bg-[var(--Surface-Accent-Primary-Light)] text-[var(--Text-Accent-Primary)] hover:border-[var(--Hover-Primary-Button)] hover:bg-[var(--Hover-Secondary-Button)] hover:text-[var(--Hover-Primary-Button)] active:border-[var(--Active-Primary-Button)] active:bg-[var(--Active-Secondary-Button)] active:text-[var(--Active-Primary-Button)] disabled:border-transparent disabled:bg-[var(--Surface-Tertiary)] disabled:text-[var(--Text-Disable)]",
 //         tertiary:
 //           "bg-[var(--Surface-Tertiary)] text-[var(--Text-High-Emphasis)] hover:bg-[var(--Hover-Tertiary-Button)] active:bg-[var(--Active-Tertiary-Button)] disabled:text-[var(--Text-Disable)]",
 //         destructive:
@@ -6955,7 +6955,7 @@ export {
 //         link: "text-[var(--Text-Medium-Emphasis)] underline underline-offset-4 hover:text-[var(--Text-High-Emphasis)] disabled:text-[var(--Text-Disable)]",
 //         /**
 //          * inverse — 暗背景の上で使う primary CTA。
-//          * 白背景 + accent text (Brand Cake Orange)。
+//          * 白背景 + accent text (Brand-Cake-Orange＝ベリー)。
 //          * hover で薄く陰り、active で更に。
 //          */
 //         inverse:
@@ -8229,7 +8229,7 @@ export {
 //         ].join(" "),
 //         /** accent — 薄いブランド色地 + ブランド色文字。Chip の selected は使わなくなった（明示指定の互換のために残す） */
 //         accent: [
-//           "bg-[var(--Surface-Accent-Primary-Light)] text-[var(--Brand-Cake-Orange)]",
+//           "bg-[var(--Surface-Accent-Primary-Light)] text-[var(--Text-Accent-Primary)]",
 //           "hover:bg-[var(--Surface-Accent-Primary)] hover:text-[var(--Text-on-Inverse)]",
 //           "disabled:bg-[var(--Surface-Secondary)] disabled:text-[var(--Text-Disable)] disabled:hover:bg-[var(--Surface-Secondary)] disabled:hover:text-[var(--Text-Disable)]",
 //         ].join(" "),
@@ -11921,12 +11921,11 @@ export {
 // }: React.ComponentProps<"span">) {
 //   return (
 //     <span
-//       aria-hidden
 //       data-slot="pagination-ellipsis"
 //       className={cn("flex size-10 shrink-0 items-center justify-center text-muted-foreground", className)}
 //       {...props}
 //     >
-//       <MoreHorizontalIcon className="size-4" />
+//       <MoreHorizontalIcon aria-hidden className="size-4" />
 //       <span className="sr-only">その他のページ</span>
 //     </span>
 //   )
@@ -12146,9 +12145,9 @@ export {
 //           "cursor-pointer outline-none",
 //           // checked = 入力部品のオン状態なのでブランド色のまま（brandColorUsage の allowed）。
 //           // Chip の selected はグレー地 + 黒系の枠に変わったため、見た目は Chip と別（Chip の accent と同一トークン）。
-//           "data-[state=checked]:bg-[var(--Surface-Accent-Primary-Light)] data-[state=checked]:text-[var(--Brand-Cake-Orange)]",
+//           "data-[state=checked]:bg-[var(--Surface-Accent-Primary-Light)] data-[state=checked]:text-[var(--Text-Accent-Primary)]",
 //           "data-[state=checked]:hover:bg-[var(--Surface-Accent-Primary)] data-[state=checked]:hover:text-[var(--Text-on-Inverse)]",
-//           // forced-colors（Windows ハイコントラスト）では薄オレンジ地が Canvas に置き換わり、未選択と
+//           // forced-colors（Windows ハイコントラスト）では薄いブランド色の地が Canvas に置き換わり、未選択と
 //           // 見分けがつかないため、選択中だけ OS の選択色で示す（Chip の selected と同じ。通常表示は不変）
 //           "forced-colors:data-[state=checked]:bg-[Highlight] forced-colors:data-[state=checked]:text-[HighlightText]",
 //           // form 固有の状態（chipVariants に無い分のみ compose）。disabled の配色は chipVariants filled が担う。
@@ -12174,7 +12173,7 @@ export {
 //         "hover:border-[var(--Text-High-Emphasis)] hover:bg-[var(--Surface-Secondary)]",
 //         "data-[state=checked]:border-[var(--Object-Accent-Primary)] data-[state=checked]:bg-[var(--Surface-Primary)]",
 //         // フォーカス意匠は DS 共通（FOCUS_RING = 緑リング）。以前はオレンジの
-//         // ring-2 で checked 状態（同じくオレンジ枠）と紛らわしかったため統一した。
+//         // ring-2 で checked 状態（同じくブランド色の枠）と紛らわしかったため統一した。
 //         FOCUS_RING,
 //         "aria-invalid:border-[var(--Border-Caution)]",
 //         "disabled:cursor-not-allowed disabled:border-[var(--Border-Medium-Emphasis)] disabled:bg-[var(--Surface-Secondary)] disabled:hover:border-[var(--Border-Medium-Emphasis)] disabled:hover:bg-[var(--Surface-Secondary)]",
@@ -14033,7 +14032,7 @@ export {
 //         default: [
 //           "bg-[var(--Surface-Tertiary)] text-[var(--Text-Medium-Emphasis)]",
 //           "hover:bg-[var(--Surface-Tertiary)]/80",
-//           "data-[state=on]:bg-[var(--Surface-Accent-Primary-Light)] data-[state=on]:text-[var(--Brand-Cake-Orange)] data-[state=on]:font-bold",
+//           "data-[state=on]:bg-[var(--Surface-Accent-Primary-Light)] data-[state=on]:text-[var(--Text-Accent-Primary)] data-[state=on]:font-bold",
 //           "dark:bg-[var(--Surface-Secondary)] dark:text-[var(--Text-Low-Emphasis)]",
 //           "dark:data-[state=on]:bg-[var(--Surface-Accent-Primary-Light)] dark:data-[state=on]:text-[var(--Text-Accent-Primary)]",
 //         ].join(" "),
@@ -24264,7 +24263,7 @@ export {
 //         success:
 //           "bg-[var(--Primitive-Forest-50)] text-[var(--Text-Success)]",
 //         accent:
-//           "bg-[var(--Surface-Accent-Primary-Light)] text-[var(--Brand-Cake-Orange)]",
+//           "bg-[var(--Surface-Accent-Primary-Light)] text-[var(--Text-Accent-Primary)]",
 //         timesale:
 //           "bg-[var(--Primitive-Wood-400)] text-[var(--Text-on-Inverse)]",
 //         berry:
@@ -24573,7 +24572,7 @@ export {
 //   data: PageNodeData
 // }
 // 
-// const handleClass = "!bg-[#E04B00] !w-2 !h-2 !border-none"
+// const handleClass = "!bg-[var(--Brand-Cake-Orange)] !w-2 !h-2 !border-none"
 // 
 // function PageNodeComponent({ data, selected }: PageNodeProps) {
 //   const handleClick = () => {
@@ -24605,12 +24604,12 @@ export {
 //         onClick={handleClick}
 //         className={[
 //           "group flex flex-col items-center gap-2 rounded-2xl border-2 bg-white px-6 py-4 shadow-md transition-all duration-150",
-//           "hover:shadow-lg hover:scale-105 hover:border-[#E04B00]",
+//           "hover:shadow-lg hover:scale-105 hover:border-[var(--Brand-Cake-Orange)]",
 //           "min-w-[160px]",
-//           selected ? "border-[#E04B00] shadow-lg ring-2 ring-[#E04B00]/30" : "border-gray-200",
+//           selected ? "border-[var(--Brand-Cake-Orange)] shadow-lg ring-2 ring-[var(--Brand-Cake-Orange)]/30" : "border-gray-200",
 //         ].join(" ")}
 //       >
-//         <div className="flex size-12 items-center justify-center rounded-xl bg-gradient-to-br from-orange-50 to-orange-100 text-2xl">
+//         <div className="flex size-12 items-center justify-center rounded-xl bg-gradient-to-br from-[var(--Brand-Cake-Orange-Ultra-Light)] to-[var(--Brand-Cake-Orange-Light)] text-2xl">
 //           {pageIcon(data.label)}
 //         </div>
 //         <div className="text-center">
@@ -24621,7 +24620,7 @@ export {
 //             </div>
 //           )}
 //         </div>
-//         <div className="text-[9px] text-orange-500 opacity-0 transition-opacity group-hover:opacity-100">
+//         <div className="text-[9px] text-[var(--Brand-Cake-Orange)] opacity-0 transition-opacity group-hover:opacity-100">
 //           Storybook で開く →
 //         </div>
 //       </button>

package/package.json

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

package/src/preset-standalone.css

@@ -194,8 +194,8 @@
   --Surface-Elevated: #FFFFFF;
   --Surface-Caution: #EC0000;
   --Surface-Caution-Light: #FFE7E6;
-  --Surface-Accent-Primary: #E04B00;
-  --Surface-Accent-Primary-Light: #FFECD9;
+  --Surface-Accent-Primary: #E5175C;
+  --Surface-Accent-Primary-Light: #FBD4E0;
   --Surface-Success: #259D63;
   --Surface-Warning: #F8F1E0;
   --Surface-Info: #003EE5;
@@ -204,16 +204,16 @@
   --Text-Medium-Emphasis: #575352;
   --Text-Low-Emphasis: #787675;
   --Text-Disable: #B7B5B4;
-  --Text-Accent-Primary: #E04B00;
-  --Text-Accent-Secondary: #FFBA84;
+  --Text-Accent-Primary: #B5175C;
+  --Text-Accent-Secondary: #F491B2;
   --Text-on-Inverse: #FFFFFF;
   --Text-Success: #259D63;
   --Text-Caution: #EC0000;
   --Text-Warning: #C16800;
   --Text-Info: #003EE5;
-  --Object-Favorite: #E04B00;
-  --Object-Accent-Primary: #E04B00;
-  --Object-Accent-Primary-Light: #FFECD9;
+  --Object-Favorite: #E5175C;
+  --Object-Accent-Primary: #E5175C;
+  --Object-Accent-Primary-Light: #FBD4E0;
   --Object-High-Emphasis: #1C1A1A;
   --Object-Medium-Emphasis: #575352;
   --Object-Low-Emphasis: #787675;
@@ -223,26 +223,26 @@
   --Object-Warning: #C16800;
   --Object-Success: #259D63;
   --Object-Info: #003EE5;
-  --Hover-Primary-Button: #BD3200;
-  --Hover-Secondary-Button: #FFD4B2;
+  --Hover-Primary-Button: #B5175C;
+  --Hover-Secondary-Button: #F7B1C8;
   --Hover-Tertiary-Button: #EBE9E8;
   --Hover-Text-Button: #EBE9E8;
   --Hover-Caution-Button: #FFC8B8;
-  --Active-Primary-Button: #BD3200;
-  --Active-Secondary-Button: #FFD4B2;
+  --Active-Primary-Button: #B5175C;
+  --Active-Secondary-Button: #F7B1C8;
   --Active-Tertiary-Button: #EBE9E8;
   --Active-Text-Button: #F4F2F1;
   --Active-Caution-Button: #FFC8B8;
   --Border-High-Emphasis: #575352;
   --Border-Medium-Emphasis: #DBD9D8;
   --Border-Low-Emphasis: #FBF9F8;
-  --Border-Accent-Primary: #E04B00;
-  --Border-Favorite: #E04B00;
+  --Border-Accent-Primary: #E5175C;
+  --Border-Favorite: #E5175C;
   --Border-Caution: #EC0000;
   --Border-Info: #003EE5;
-  --Brand-Cake-Orange: #E04B00;
-  --Brand-Cake-Orange-Light: #FFD4B2;
-  --Brand-Cake-Orange-Ultra-Light: #FFECD9;
+  --Brand-Cake-Orange: #E5175C;
+  --Brand-Cake-Orange-Light: #F7B1C8;
+  --Brand-Cake-Orange-Ultra-Light: #FBD4E0;
   --Overlay-Dark: #000000CC;
   --Overlay-Medium: #00000099;
   --Overlay-Light: #00000033;
@@ -250,11 +250,11 @@
   --Surface-Glass: #FFFFFFCC;
   --Surface-Glass-Soft: rgba(255, 255, 255, 0.76);
   --Surface-Glass-Faint: #FFFFFFB2;
-  --Surface-Brand-Ghost: rgba(255, 236, 217, 0.7);
+  --Surface-Brand-Ghost: rgba(251, 212, 224, 0.7);
   --Surface-Overlay-Light: #FFFFFFCC;
   --Surface-Overlay-Dark: #00000066;
   --Border-Hairline: rgba(28, 26, 26, 0.08);
-  --Border-Brand-Subtle: rgba(224, 75, 0, 0.16);
+  --Border-Brand-Subtle: rgba(229, 23, 92, 0.16);
   --Caution-Base: #EC0000;
   --Caution-Light: #FFA28B;
   --Caution-Ultra-Light: #FFE7E6;
@@ -277,8 +277,8 @@
   --Surface-Elevated: #3A3736;
   --Surface-Caution: #EC0000;
   --Surface-Caution-Light: #FFE7E6;
-  --Surface-Accent-Primary: #E04B00;
-  --Surface-Accent-Primary-Light: #E04B0026;
+  --Surface-Accent-Primary: #E5175C;
+  --Surface-Accent-Primary-Light: #E5175C26;
   --Surface-Success: #259D63;
   --Surface-Warning: #F8F1E0;
   --Surface-Info: #003EE5;
@@ -287,16 +287,16 @@
   --Text-Medium-Emphasis: #FFFFFFCC;
   --Text-Low-Emphasis: #FFFFFF99;
   --Text-Disable: #FFFFFF4D;
-  --Text-Accent-Primary: #F16311;
-  --Text-Accent-Secondary: #FFD4B2;
+  --Text-Accent-Primary: #EA296A;
+  --Text-Accent-Secondary: #F7B1C8;
   --Text-on-Inverse: #FFFFFF;
   --Text-Success: #259D63;
   --Text-Caution: #FF5838;
   --Text-Warning: #C16800;
   --Text-Info: #4979F5;
-  --Object-Favorite: #F16311;
-  --Object-Accent-Primary: #F16311;
-  --Object-Accent-Primary-Light: #FFECD9;
+  --Object-Favorite: #EA296A;
+  --Object-Accent-Primary: #EA296A;
+  --Object-Accent-Primary-Light: #FBD4E0;
   --Object-High-Emphasis: #FFFFFF;
   --Object-Medium-Emphasis: #FFFFFFCC;
   --Object-Low-Emphasis: #FFFFFF99;
@@ -306,12 +306,12 @@
   --Object-Warning: #C16800;
   --Object-Success: #259D63;
   --Object-Info: #4979F5;
-  --Hover-Primary-Button: #BD3200;
+  --Hover-Primary-Button: #B5175C;
   --Hover-Secondary-Button: #FFFFFF1A;
   --Hover-Tertiary-Button: #FFFFFF0D;
   --Hover-Text-Button: #FFFFFF33;
   --Hover-Caution-Button: #FFE7E6;
-  --Active-Primary-Button: #BD3200;
+  --Active-Primary-Button: #B5175C;
   --Active-Secondary-Button: #FFFFFF1A;
   --Active-Tertiary-Button: #FFFFFF0D;
   --Active-Text-Button: #FFFFFF1A;
@@ -319,13 +319,13 @@
   --Border-High-Emphasis: #FFFFFF80;
   --Border-Medium-Emphasis: #FFFFFF33;
   --Border-Low-Emphasis: #FFFFFF0D;
-  --Border-Accent-Primary: #F16311;
-  --Border-Favorite: #F16311;
+  --Border-Accent-Primary: #EA296A;
+  --Border-Favorite: #EA296A;
   --Border-Caution: #EC0000;
   --Border-Info: #4979F5;
-  --Brand-Cake-Orange: #E04B00;
-  --Brand-Cake-Orange-Light: #FFD4B2;
-  --Brand-Cake-Orange-Ultra-Light: #FFECD9;
+  --Brand-Cake-Orange: #E5175C;
+  --Brand-Cake-Orange-Light: #F7B1C8;
+  --Brand-Cake-Orange-Ultra-Light: #FBD4E0;
   --Overlay-Dark: #FFFFFF4D;
   --Overlay-Medium: #FFFFFF33;
   --Overlay-Light: #FFFFFF1A;
@@ -333,9 +333,9 @@
   --Surface-Glass: #FFFFFF1A;
   --Surface-Glass-Soft: #FFFFFF1A;
   --Surface-Glass-Faint: #FFFFFF0D;
-  --Surface-Brand-Ghost: rgba(224, 75, 0, 0.12);
+  --Surface-Brand-Ghost: rgba(229, 23, 92, 0.12);
   --Border-Hairline: #FFFFFF1A;
-  --Border-Brand-Subtle: rgba(224, 75, 0, 0.24);
+  --Border-Brand-Subtle: rgba(229, 23, 92, 0.24);
 }
 
 /* --- Layer 2b: High Contrast（コントラストを上げる）---

package/src/styles/primitive.css

@@ -5,7 +5,7 @@
  * https://www.figma.com/community/plugin/1382804904426179542/export-variables-css-scss-tailwind
  */
 @theme {
-  /* Orange */
+  /* Orange（旧ブランドカラー。ブランド系の semantic トークンは Berry を参照するようになったが、値は残す） */
   --Primitive-Orange-50: #FFECD9FF;
   --Primitive-Orange-100: #FFD4B2FF;
   --Primitive-Orange-200: #FFBA84FF;

package/src/styles/semantic.css

@@ -24,8 +24,8 @@
   --Surface-Elevated: var(--Primitive-White-alpha-1000);
   --Surface-Caution: var(--Primitive-Sun-800);
   --Surface-Caution-Light: var(--Primitive-Sun-50);
-  --Surface-Accent-Primary: var(--Primitive-Orange-700);
-  --Surface-Accent-Primary-Light: var(--Primitive-Orange-50);
+  --Surface-Accent-Primary: var(--Primitive-Berry-700);
+  --Surface-Accent-Primary-Light: var(--Primitive-Berry-50);
   --Surface-Success: var(--Primitive-Forest-600);
   --Surface-Warning: var(--Primitive-Wood-50);
   --Surface-Info: var(--Primitive-Sea-600);
@@ -36,8 +36,8 @@
   --Text-Medium-Emphasis: var(--Primitive-Gray-700);
   --Text-Low-Emphasis: var(--Primitive-Gray-600);
   --Text-Disable: var(--Primitive-Gray-400);
-  --Text-Accent-Primary: var(--Brand-Cake-Orange);
-  --Text-Accent-Secondary: var(--Primitive-Orange-200);
+  --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-Caution: var(--Primitive-Sun-800);
@@ -59,13 +59,13 @@
   --Object-Info: var(--Primitive-Sea-600);
 
   /* Hover / Active */
-  --Hover-Primary-Button: var(--Primitive-Orange-800);
-  --Hover-Secondary-Button: var(--Primitive-Orange-100);
+  --Hover-Primary-Button: var(--Primitive-Berry-800);
+  --Hover-Secondary-Button: var(--Primitive-Berry-100);
   --Hover-Tertiary-Button: var(--Primitive-Gray-200);
   --Hover-Text-Button: var(--Primitive-Gray-200);
   --Hover-Caution-Button: var(--Primitive-Sun-100);
-  --Active-Primary-Button: var(--Primitive-Orange-800);
-  --Active-Secondary-Button: var(--Primitive-Orange-100);
+  --Active-Primary-Button: var(--Primitive-Berry-800);
+  --Active-Secondary-Button: var(--Primitive-Berry-100);
   --Active-Tertiary-Button: var(--Primitive-Gray-200);
   --Active-Text-Button: var(--Primitive-Gray-100);
   --Active-Caution-Button: var(--Primitive-Sun-100);
@@ -79,10 +79,12 @@
   --Border-Caution: var(--Surface-Caution);
   --Border-Info: var(--Primitive-Sea-600);
 
-  /* Brand */
-  --Brand-Cake-Orange: var(--Primitive-Orange-700);
-  --Brand-Cake-Orange-Light: var(--Primitive-Orange-100);
-  --Brand-Cake-Orange-Ultra-Light: var(--Primitive-Orange-50);
+  /* Brand
+   * ブランドカラーはオレンジ -> ベリー(赤系)へ変更済み。参照側を壊さないため変数名 Brand-Cake-Orange は据え置き。
+   * 旧カラー(オレンジ)は --Primitive-Orange-* に元の値のまま残している。 */
+  --Brand-Cake-Orange: var(--Primitive-Berry-700);
+  --Brand-Cake-Orange-Light: var(--Primitive-Berry-100);
+  --Brand-Cake-Orange-Ultra-Light: var(--Primitive-Berry-50);
 
   /* Overlay */
   --Overlay-Dark: var(--Primitive-Gray-alpha-800);
@@ -94,7 +96,7 @@
   --Surface-Glass: var(--Primitive-White-alpha-800);         /* rgba(255,255,255,0.8) */
   --Surface-Glass-Soft: rgba(255, 255, 255, 0.76);           /* ドロワーナビ背景 */
   --Surface-Glass-Faint: var(--Primitive-White-alpha-700);   /* rgba(255,255,255,0.698≈0.7) */
-  --Surface-Brand-Ghost: rgba(255, 236, 217, 0.7);           /* Orange-50 at 70%。閉じるボタン等 */
+  --Surface-Brand-Ghost: rgba(251, 212, 224, 0.7);           /* Berry-50 at 70%。閉じるボタン等 */
 
   /* Overlay surfaces（画像・メディアの上に載せる半透過サーフェス）
    * Surface-Glass と同じ半透過白でも用途を分けて命名: こちらは「画像上のボタン/ピル下地」専用。
@@ -105,7 +107,7 @@
 
   /* Border alphas */
   --Border-Hairline: rgba(28, 26, 26, 0.08);       /* Gray-900 8%。微細ボーダー */
-  --Border-Brand-Subtle: rgba(224, 75, 0, 0.16);   /* Brand-Orange 16%。SNSリンクボーダー等 */
+  --Border-Brand-Subtle: rgba(229, 23, 92, 0.16);   /* Brand(Berry) 16%。SNSリンクボーダー等 */
 
   /* Caution / Focus */
   --Caution-Base: var(--Primitive-Sun-800);
@@ -141,8 +143,8 @@
   --Surface-Elevated: var(--Primitive-Gray-800);
   --Surface-Caution: var(--Primitive-Sun-800);
   --Surface-Caution-Light: var(--Primitive-Sun-50);
-  --Surface-Accent-Primary: var(--Primitive-Orange-700);
-  --Surface-Accent-Primary-Light: #E04B0026; /* Brand-Orange at ~15% alpha — ダーク背景で濁らないよう調整 */
+  --Surface-Accent-Primary: var(--Primitive-Berry-700);
+  --Surface-Accent-Primary-Light: #E5175C26; /* Brand(Berry) at ~15% alpha — ダーク背景で濁らないよう調整 */
   --Surface-Success: var(--Primitive-Forest-600);
   --Surface-Warning: var(--Primitive-Wood-50);
   --Surface-Info: var(--Primitive-Sea-600);
@@ -153,8 +155,8 @@
   --Text-Medium-Emphasis: var(--Primitive-White-alpha-800);
   --Text-Low-Emphasis: var(--Primitive-White-alpha-600);
   --Text-Disable: var(--Primitive-White-alpha-300);
-  --Text-Accent-Primary: var(--Primitive-Orange-600);
-  --Text-Accent-Secondary: var(--Primitive-Orange-100);
+  --Text-Accent-Primary: var(--Primitive-Berry-600);
+  --Text-Accent-Secondary: var(--Primitive-Berry-100);
   --Text-on-Inverse: var(--Primitive-White-alpha-1000); /* ブランドカラー背景上で使用するため白を維持 */
   --Text-Success: var(--Primitive-Forest-600);
   --Text-Caution: var(--Primitive-Sun-400);
@@ -162,8 +164,8 @@
   --Text-Info: var(--Primitive-Sea-400);
 
   /* Object */
-  --Object-Favorite: var(--Primitive-Orange-600);
-  --Object-Accent-Primary: var(--Primitive-Orange-600);
+  --Object-Favorite: var(--Primitive-Berry-600);
+  --Object-Accent-Primary: var(--Primitive-Berry-600);
   --Object-Accent-Primary-Light: var(--Brand-Cake-Orange-Ultra-Light);
   --Object-High-Emphasis: var(--Primitive-White-alpha-1000);
   --Object-Medium-Emphasis: var(--Primitive-White-alpha-800);
@@ -176,12 +178,12 @@
   --Object-Info: var(--Primitive-Sea-400);
 
   /* Hover / Active */
-  --Hover-Primary-Button: var(--Primitive-Orange-800);
+  --Hover-Primary-Button: var(--Primitive-Berry-800);
   --Hover-Secondary-Button: var(--Primitive-White-alpha-100);
   --Hover-Tertiary-Button: var(--Primitive-White-alpha-50);
   --Hover-Text-Button: var(--Primitive-White-alpha-200);
   --Hover-Caution-Button: var(--Primitive-Sun-50);
-  --Active-Primary-Button: var(--Primitive-Orange-800);
+  --Active-Primary-Button: var(--Primitive-Berry-800);
   --Active-Secondary-Button: var(--Primitive-White-alpha-100);
   --Active-Tertiary-Button: var(--Primitive-White-alpha-50);
   --Active-Text-Button: var(--Primitive-White-alpha-100);
@@ -191,15 +193,15 @@
   --Border-High-Emphasis: var(--Primitive-White-alpha-500);
   --Border-Medium-Emphasis: var(--Primitive-White-alpha-200);
   --Border-Low-Emphasis: var(--Primitive-White-alpha-50);
-  --Border-Accent-Primary: var(--Primitive-Orange-600);
-  --Border-Favorite: var(--Primitive-Orange-600);
+  --Border-Accent-Primary: var(--Primitive-Berry-600);
+  --Border-Favorite: var(--Primitive-Berry-600);
   --Border-Caution: var(--Surface-Caution);
   --Border-Info: var(--Primitive-Sea-400);
 
   /* Brand（ダークでも同じ） */
-  --Brand-Cake-Orange: var(--Primitive-Orange-700);
-  --Brand-Cake-Orange-Light: var(--Primitive-Orange-100);
-  --Brand-Cake-Orange-Ultra-Light: var(--Primitive-Orange-50);
+  --Brand-Cake-Orange: var(--Primitive-Berry-700);
+  --Brand-Cake-Orange-Light: var(--Primitive-Berry-100);
+  --Brand-Cake-Orange-Ultra-Light: var(--Primitive-Berry-50);
 
   /* Overlay（ダークモードでは白系に切替、背景が暗いためグレー系では視認不能） */
   --Overlay-Dark: var(--Primitive-White-alpha-300);
@@ -211,11 +213,11 @@
   --Surface-Glass: var(--Primitive-White-alpha-100);
   --Surface-Glass-Soft: var(--Primitive-White-alpha-100);
   --Surface-Glass-Faint: var(--Primitive-White-alpha-50);
-  --Surface-Brand-Ghost: rgba(224, 75, 0, 0.12);
+  --Surface-Brand-Ghost: rgba(229, 23, 92, 0.12);
 
   /* Border alphas */
   --Border-Hairline: var(--Primitive-White-alpha-100);
-  --Border-Brand-Subtle: rgba(224, 75, 0, 0.24);
+  --Border-Brand-Subtle: rgba(229, 23, 92, 0.24);
 
   /* Third-Party（ダークでも同じ） */
 }