diff --git a/packages/bezier-react/src/components/AlphaAvatar/__snapshots__/Avatar.test.tsx.snap b/packages/bezier-react/src/components/AlphaAvatar/__snapshots__/Avatar.test.tsx.snap
index 6e24fe2b56..fabc6bbc05 100644
--- a/packages/bezier-react/src/components/AlphaAvatar/__snapshots__/Avatar.test.tsx.snap
+++ b/packages/bezier-react/src/components/AlphaAvatar/__snapshots__/Avatar.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Avatar > Snapshot 1`] = `
   class="SmoothCornersBox AvatarImage"
   data-state="disabled"
   data-testid="bezier-avatar"
-  style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+  style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
 />
 `;
 
@@ -16,7 +16,7 @@ exports[`Avatar > renders border style 1`] = `
   class="SmoothCornersBox AvatarImage bordered"
   data-state="disabled"
   data-testid="bezier-avatar"
-  style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 2px; --b-smooth-corners-box-shadow-color: var(--bg-white-high); --b-smooth-corners-box-padding: 4px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+  style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 2px; --b-smooth-corners-box-shadow-color: var(--alpha-bg-white-highest); --b-smooth-corners-box-padding: 4px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
 />
 `;
 
@@ -27,7 +27,7 @@ exports[`Avatar > should have right -2px, bottom -2px style on StatusWrapper 1`]
 >
   <div
     class="Status size-m"
-    style="--b-status-bg-color: var(--bgtxt-green-normal);"
+    style="--b-status-bg-color: var(--alpha-bg-green-normal);"
   />
 </div>
 `;
@@ -39,7 +39,7 @@ exports[`Avatar > should have right 2px, bottom 2px style on StatusWrapper when
 >
   <div
     class="Status size-m"
-    style="--b-status-bg-color: var(--bgtxt-green-normal);"
+    style="--b-status-bg-color: var(--alpha-bg-green-normal);"
   />
 </div>
 `;
@@ -51,7 +51,7 @@ exports[`Avatar > should have right 4px, bottom 4px style on StatusWrapper when
 >
   <div
     class="Status size-m"
-    style="--b-status-bg-color: var(--bgtxt-green-normal);"
+    style="--b-status-bg-color: var(--alpha-bg-green-normal);"
   />
 </div>
 `;
@@ -63,7 +63,7 @@ exports[`Avatar > should have right 4px, bottom 4px style on StatusWrapper when
 >
   <div
     class="Status size-l"
-    style="--b-status-bg-color: var(--bgtxt-green-normal);"
+    style="--b-status-bg-color: var(--alpha-bg-green-normal);"
   />
 </div>
 `;
@@ -75,7 +75,7 @@ exports[`Avatar > should have right 8px, bottom 8px style on StatusWrapper when
 >
   <div
     class="Status size-m"
-    style="--b-status-bg-color: var(--bgtxt-green-normal);"
+    style="--b-status-bg-color: var(--alpha-bg-green-normal);"
   />
 </div>
 `;
@@ -87,7 +87,7 @@ exports[`Avatar > should have right 8px, bottom 8px style on StatusWrapper when
 >
   <div
     class="Status size-l"
-    style="--b-status-bg-color: var(--bgtxt-green-normal);"
+    style="--b-status-bg-color: var(--alpha-bg-green-normal);"
   />
 </div>
 `;
diff --git a/packages/bezier-react/src/components/AlphaAvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap b/packages/bezier-react/src/components/AlphaAvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap
index ad96cb7008..fe64ee5192 100644
--- a/packages/bezier-react/src/components/AlphaAvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap
+++ b/packages/bezier-react/src/components/AlphaAvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
-      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
     />
   </div>
   <div
@@ -29,7 +29,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
-      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
     />
   </div>
   <div
@@ -42,7 +42,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
-      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
     />
   </div>
   <div
@@ -55,7 +55,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
-      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
     />
   </div>
   <div
@@ -68,7 +68,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
-      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
     />
   </div>
   <div
@@ -81,7 +81,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
-      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
     />
   </div>
   <div
@@ -91,7 +91,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
     <span
       class="Text typo-13 margin AvatarEllipsisCount"
       data-testid="bezier-text"
-      style="--b-text-color: var(--txt-black-dark);"
+      style="--b-text-color: var(--alpha-fg-black-dark);"
     >
       +1
     </span>
@@ -115,7 +115,7 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
-      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
     />
   </div>
   <div
@@ -128,7 +128,7 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
-      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
     />
   </div>
   <div
@@ -141,7 +141,7 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
-      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
     />
   </div>
   <div
@@ -154,7 +154,7 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
-      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
     />
   </div>
   <div
@@ -167,7 +167,7 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
-      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
     />
   </div>
   <div
@@ -177,14 +177,14 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
     <div
       class="SmoothCornersBox AvatarEllipsisIcon"
       data-state="disabled"
-      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bgtxt-absolute-black-lightest);"
+      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-absolute-black-lightest);"
     >
       <svg
         class="Icon size-xs margin"
         data-testid="bezier-icon"
         fill="none"
         height="1em"
-        style="--b-icon-color: var(--bgtxt-absolute-white-dark);"
+        style="--b-icon-color: var(--alpha-bg-absolute-white-dark);"
         viewBox="0 0 24 24"
         width="1em"
         xmlns="http://www.w3.org/2000/svg"
@@ -207,7 +207,7 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
         class="SmoothCornersBox AvatarImage"
         data-state="disabled"
         data-testid="bezier-avatar"
-        style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+        style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
       />
     </div>
   </div>
diff --git a/packages/bezier-react/src/components/Avatar/__snapshots__/Avatar.test.tsx.snap b/packages/bezier-react/src/components/Avatar/__snapshots__/Avatar.test.tsx.snap
index 6e24fe2b56..fabc6bbc05 100644
--- a/packages/bezier-react/src/components/Avatar/__snapshots__/Avatar.test.tsx.snap
+++ b/packages/bezier-react/src/components/Avatar/__snapshots__/Avatar.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Avatar > Snapshot 1`] = `
   class="SmoothCornersBox AvatarImage"
   data-state="disabled"
   data-testid="bezier-avatar"
-  style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+  style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
 />
 `;
 
@@ -16,7 +16,7 @@ exports[`Avatar > renders border style 1`] = `
   class="SmoothCornersBox AvatarImage bordered"
   data-state="disabled"
   data-testid="bezier-avatar"
-  style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 2px; --b-smooth-corners-box-shadow-color: var(--bg-white-high); --b-smooth-corners-box-padding: 4px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+  style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 2px; --b-smooth-corners-box-shadow-color: var(--alpha-bg-white-highest); --b-smooth-corners-box-padding: 4px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
 />
 `;
 
@@ -27,7 +27,7 @@ exports[`Avatar > should have right -2px, bottom -2px style on StatusWrapper 1`]
 >
   <div
     class="Status size-m"
-    style="--b-status-bg-color: var(--bgtxt-green-normal);"
+    style="--b-status-bg-color: var(--alpha-bg-green-normal);"
   />
 </div>
 `;
@@ -39,7 +39,7 @@ exports[`Avatar > should have right 2px, bottom 2px style on StatusWrapper when
 >
   <div
     class="Status size-m"
-    style="--b-status-bg-color: var(--bgtxt-green-normal);"
+    style="--b-status-bg-color: var(--alpha-bg-green-normal);"
   />
 </div>
 `;
@@ -51,7 +51,7 @@ exports[`Avatar > should have right 4px, bottom 4px style on StatusWrapper when
 >
   <div
     class="Status size-m"
-    style="--b-status-bg-color: var(--bgtxt-green-normal);"
+    style="--b-status-bg-color: var(--alpha-bg-green-normal);"
   />
 </div>
 `;
@@ -63,7 +63,7 @@ exports[`Avatar > should have right 4px, bottom 4px style on StatusWrapper when
 >
   <div
     class="Status size-l"
-    style="--b-status-bg-color: var(--bgtxt-green-normal);"
+    style="--b-status-bg-color: var(--alpha-bg-green-normal);"
   />
 </div>
 `;
@@ -75,7 +75,7 @@ exports[`Avatar > should have right 8px, bottom 8px style on StatusWrapper when
 >
   <div
     class="Status size-m"
-    style="--b-status-bg-color: var(--bgtxt-green-normal);"
+    style="--b-status-bg-color: var(--alpha-bg-green-normal);"
   />
 </div>
 `;
@@ -87,7 +87,7 @@ exports[`Avatar > should have right 8px, bottom 8px style on StatusWrapper when
 >
   <div
     class="Status size-l"
-    style="--b-status-bg-color: var(--bgtxt-green-normal);"
+    style="--b-status-bg-color: var(--alpha-bg-green-normal);"
   />
 </div>
 `;
diff --git a/packages/bezier-react/src/components/AvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap b/packages/bezier-react/src/components/AvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap
index 675589de23..ccf520b8f6 100644
--- a/packages/bezier-react/src/components/AvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap
+++ b/packages/bezier-react/src/components/AvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
-      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
     />
   </div>
   <div
@@ -29,7 +29,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
-      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
     />
   </div>
   <div
@@ -42,7 +42,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
-      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
     />
   </div>
   <div
@@ -55,7 +55,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
-      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
     />
   </div>
   <div
@@ -68,7 +68,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
-      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
     />
   </div>
   <div
@@ -81,7 +81,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
-      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
     />
   </div>
   <div
@@ -91,7 +91,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
     <span
       class="Text typo-13 margin AvatarEllipsisCount"
       data-testid="bezier-text"
-      style="--b-text-color: var(--txt-black-dark);"
+      style="--b-text-color: var(--alpha-fg-black-dark);"
     >
       +1
     </span>
@@ -115,7 +115,7 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
-      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
     />
   </div>
   <div
@@ -128,7 +128,7 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
-      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
     />
   </div>
   <div
@@ -141,7 +141,7 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
-      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
     />
   </div>
   <div
@@ -154,7 +154,7 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
-      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
     />
   </div>
   <div
@@ -167,7 +167,7 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
-      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
     />
   </div>
   <div
@@ -177,14 +177,14 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
     <div
       class="SmoothCornersBox AvatarEllipsisIcon"
       data-state="disabled"
-      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bgtxt-absolute-black-lightest);"
+      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-absolute-black-lightest);"
     >
       <svg
         class="Icon size-xs margin"
         data-testid="bezier-icon"
         fill="none"
         height="1em"
-        style="--b-icon-color: var(--bgtxt-absolute-white-dark);"
+        style="--b-icon-color: var(--alpha-bg-absolute-white-dark);"
         viewBox="0 0 24 24"
         width="1em"
         xmlns="http://www.w3.org/2000/svg"
@@ -207,7 +207,7 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
         class="SmoothCornersBox AvatarImage"
         data-state="disabled"
         data-testid="bezier-avatar"
-        style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+        style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
       />
     </div>
   </div>
diff --git a/packages/bezier-react/src/components/FormControl/__snapshots__/FormControl.test.tsx.snap b/packages/bezier-react/src/components/FormControl/__snapshots__/FormControl.test.tsx.snap
index e9fc0bc3df..de95f8a2e2 100644
--- a/packages/bezier-react/src/components/FormControl/__snapshots__/FormControl.test.tsx.snap
+++ b/packages/bezier-react/src/components/FormControl/__snapshots__/FormControl.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`FormControl > Snapshot > With multiple field 1`] = `
       class="Text typo-13 bold align-left margin LabelText FormLabelWrapper position-top size-m"
       data-testid="bezier-form-label"
       id="form-label"
-      style="--b-text-color: var(--txt-black-darkest);"
+      style="--b-text-color: var(--alpha-fg-black-darkest);"
     >
       Label
     </label>
@@ -32,7 +32,7 @@ exports[`FormControl > Snapshot > With multiple field 1`] = `
           data-testid="bezier-form-label"
           for="field-:r3:"
           id="field-:r3:-label"
-          style="--b-text-color: var(--txt-black-darkest);"
+          style="--b-text-color: var(--alpha-fg-black-darkest);"
         >
           First Inner Label
         </label>
@@ -57,7 +57,7 @@ exports[`FormControl > Snapshot > With multiple field 1`] = `
           data-testid="bezier-form-label"
           for="field-:r4:"
           id="field-:r4:-label"
-          style="--b-text-color: var(--txt-black-darkest);"
+          style="--b-text-color: var(--alpha-fg-black-darkest);"
         >
           Second Inner Label
         </label>
@@ -79,7 +79,7 @@ exports[`FormControl > Snapshot > With multiple field 1`] = `
       class="Text typo-13 align-left margin FormHelperText FormHelperTextWrapper"
       data-testid="bezier-form-helper-text"
       id="form-help-text"
-      style="--b-text-color: var(--txt-black-dark);"
+      style="--b-text-color: var(--alpha-fg-black-dark);"
     >
       Description
     </p>
@@ -97,7 +97,7 @@ exports[`FormControl > Snapshot > With multiple field and left label position 1`
       class="Text typo-14 bold align-left margin LabelText FormLabelWrapper position-left size-m"
       data-testid="bezier-form-label"
       id="form-label"
-      style="--b-text-color: var(--txt-black-darkest);"
+      style="--b-text-color: var(--alpha-fg-black-darkest);"
     >
       Label
     </label>
@@ -119,7 +119,7 @@ exports[`FormControl > Snapshot > With multiple field and left label position 1`
           data-testid="bezier-form-label"
           for="field-:r6:"
           id="field-:r6:-label"
-          style="--b-text-color: var(--txt-black-darkest);"
+          style="--b-text-color: var(--alpha-fg-black-darkest);"
         >
           First Inner Label
         </label>
@@ -144,7 +144,7 @@ exports[`FormControl > Snapshot > With multiple field and left label position 1`
           data-testid="bezier-form-label"
           for="field-:r7:"
           id="field-:r7:-label"
-          style="--b-text-color: var(--txt-black-darkest);"
+          style="--b-text-color: var(--alpha-fg-black-darkest);"
         >
           Second Inner Label
         </label>
@@ -166,7 +166,7 @@ exports[`FormControl > Snapshot > With multiple field and left label position 1`
       class="Text typo-13 align-left margin FormHelperText FormHelperTextWrapper position-left"
       data-testid="bezier-form-helper-text"
       id="form-help-text"
-      style="--b-text-color: var(--txt-black-dark);"
+      style="--b-text-color: var(--alpha-fg-black-dark);"
     >
       Description
     </p>
@@ -184,7 +184,7 @@ exports[`FormControl > Snapshot > With single field 1`] = `
     data-testid="bezier-form-label"
     for="form"
     id="form-label"
-    style="--b-text-color: var(--txt-black-darkest);"
+    style="--b-text-color: var(--alpha-fg-black-darkest);"
   >
     Label
   </label>
@@ -204,7 +204,7 @@ exports[`FormControl > Snapshot > With single field 1`] = `
     class="Text typo-13 align-left margin FormHelperText FormHelperTextWrapper"
     data-testid="bezier-form-helper-text"
     id="form-help-text"
-    style="--b-text-color: var(--txt-black-dark);"
+    style="--b-text-color: var(--alpha-fg-black-dark);"
   >
     Description
   </p>
@@ -221,7 +221,7 @@ exports[`FormControl > Snapshot > With single field and left label position 1`]
     data-testid="bezier-form-label"
     for="form"
     id="form-label"
-    style="--b-text-color: var(--txt-black-darkest);"
+    style="--b-text-color: var(--alpha-fg-black-darkest);"
   >
     Label
   </label>
@@ -241,7 +241,7 @@ exports[`FormControl > Snapshot > With single field and left label position 1`]
     class="Text typo-13 align-left margin FormHelperText FormHelperTextWrapper position-left"
     data-testid="bezier-form-helper-text"
     id="form-help-text"
-    style="--b-text-color: var(--txt-black-dark);"
+    style="--b-text-color: var(--alpha-fg-black-dark);"
   >
     Description
   </p>
diff --git a/packages/bezier-react/src/components/FormHelperText/__snapshots__/FormHelperText.test.tsx.snap b/packages/bezier-react/src/components/FormHelperText/__snapshots__/FormHelperText.test.tsx.snap
index c7d9f1e815..180cbdaca2 100644
--- a/packages/bezier-react/src/components/FormHelperText/__snapshots__/FormHelperText.test.tsx.snap
+++ b/packages/bezier-react/src/components/FormHelperText/__snapshots__/FormHelperText.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`FormErrorMessage > Snapshot > 1`] = `
   class="Text typo-13 align-left margin FormHelperText"
   data-testid="bezier-form-error-message"
   id="test"
-  style="--b-text-color: var(--bgtxt-orange-normal);"
+  style="--b-text-color: var(--alpha-bg-orange-normal);"
 >
   Lorem ipsum
 </p>
@@ -17,7 +17,7 @@ exports[`FormHelperText > Snapshot > 1`] = `
   class="Text typo-13 align-left margin FormHelperText"
   data-testid="bezier-form-helper-text"
   id="test"
-  style="--b-text-color: var(--txt-black-dark);"
+  style="--b-text-color: var(--alpha-fg-black-dark);"
 >
   Lorem ipsum
 </p>
diff --git a/packages/bezier-react/src/components/FormLabel/__snapshots__/FormLabel.test.tsx.snap b/packages/bezier-react/src/components/FormLabel/__snapshots__/FormLabel.test.tsx.snap
index a2fc57f63d..40f2ee3b8e 100644
--- a/packages/bezier-react/src/components/FormLabel/__snapshots__/FormLabel.test.tsx.snap
+++ b/packages/bezier-react/src/components/FormLabel/__snapshots__/FormLabel.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`FormLabel > Snapshot > 1`] = `
 <label
   class="Text typo-13 bold align-left margin LabelText"
   data-testid="bezier-form-label"
-  style="--b-text-color: var(--txt-black-darkest);"
+  style="--b-text-color: var(--alpha-fg-black-darkest);"
 >
   label
 </label>
diff --git a/packages/bezier-react/src/components/Help/__snapshots__/Help.test.tsx.snap b/packages/bezier-react/src/components/Help/__snapshots__/Help.test.tsx.snap
index 0041d2245f..0e1a210357 100644
--- a/packages/bezier-react/src/components/Help/__snapshots__/Help.test.tsx.snap
+++ b/packages/bezier-react/src/components/Help/__snapshots__/Help.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Help > Snapshot > 1`] = `
   data-testid="bezier-help"
   fill="none"
   height="1em"
-  style="--b-icon-color: var(--txt-black-dark);"
+  style="--b-icon-color: var(--alpha-fg-black-dark);"
   viewBox="0 0 24 24"
   width="1em"
   xmlns="http://www.w3.org/2000/svg"
diff --git a/packages/bezier-react/src/components/Icon/Icon.test.tsx b/packages/bezier-react/src/components/Icon/Icon.test.tsx
index 5f355f50fd..4fdfcec4d6 100644
--- a/packages/bezier-react/src/components/Icon/Icon.test.tsx
+++ b/packages/bezier-react/src/components/Icon/Icon.test.tsx
@@ -29,15 +29,4 @@ describe('Icon test >', () => {
 
     expect(renderedIcon).toHaveStyle('color: inherit;')
   })
-
-  it('Icon receives custom color', () => {
-    const { getByTestId } = renderIcon({
-      source: AllIcon,
-      color: 'bgtxt-olive-dark',
-    })
-
-    const renderedIcon = getByTestId(ICON_TEST_ID)
-
-    expect(renderedIcon).toHaveStyle('--b-icon-color: var(--bgtxt-olive-dark);')
-  })
 })
diff --git a/packages/bezier-react/src/components/LegacyTooltip/__snapshots__/LegacyTooltip.test.tsx.snap b/packages/bezier-react/src/components/LegacyTooltip/__snapshots__/LegacyTooltip.test.tsx.snap
index 1b277d98cd..1ca288d473 100644
--- a/packages/bezier-react/src/components/LegacyTooltip/__snapshots__/LegacyTooltip.test.tsx.snap
+++ b/packages/bezier-react/src/components/LegacyTooltip/__snapshots__/LegacyTooltip.test.tsx.snap
@@ -22,7 +22,7 @@ exports[`Tooltip test > Tooltip with default props 1`] = `
       <span
         class="Text typo-13 multi-line-truncated margin"
         data-testid="bezier-text"
-        style="--b-text-color: var(--txt-black-darkest); --b-text-line-clamp: 20;"
+        style="--b-text-color: var(--alpha-fg-black-darkest); --b-text-line-clamp: 20;"
       >
         <span
           class="Text typo-14 margin"
diff --git a/packages/bezier-react/src/components/NavGroup/NavGroup.test.tsx b/packages/bezier-react/src/components/NavGroup/NavGroup.test.tsx
index 8280fb4ae3..76153bf72d 100644
--- a/packages/bezier-react/src/components/NavGroup/NavGroup.test.tsx
+++ b/packages/bezier-react/src/components/NavGroup/NavGroup.test.tsx
@@ -54,22 +54,4 @@ describe('NavGroup Test >', () => {
       expect(rendered).toMatchSnapshot()
     })
   })
-
-  describe('LeftIcon Color', () => {
-    it('Icon color should be "bgtxt-blue-normal" when active prop is true', () => {
-      const { getByTestId } = renderNavItem({ active: true })
-
-      const rendered = getByTestId(NAV_GROUP_LEFT_ICON_TEST_ID)
-
-      expect(rendered).toHaveStyle('--b-icon-color: var(--bgtxt-blue-normal)')
-    })
-
-    it('Icon color should be "txt-black-dark" when active prop is false', () => {
-      const { getByTestId } = renderNavItem({ active: false })
-
-      const rendered = getByTestId(NAV_GROUP_LEFT_ICON_TEST_ID)
-
-      expect(rendered).toHaveStyle('--b-icon-color: var(--txt-black-dark)')
-    })
-  })
 })
diff --git a/packages/bezier-react/src/components/NavGroup/__snapshots__/NavGroup.test.tsx.snap b/packages/bezier-react/src/components/NavGroup/__snapshots__/NavGroup.test.tsx.snap
index f4b5535f0d..3dccdfb2c8 100644
--- a/packages/bezier-react/src/components/NavGroup/__snapshots__/NavGroup.test.tsx.snap
+++ b/packages/bezier-react/src/components/NavGroup/__snapshots__/NavGroup.test.tsx.snap
@@ -17,7 +17,7 @@ exports[`NavGroup Test > Snapshot > Active 1`] = `
       data-testid="bezier-nav-group-left-icon"
       fill="none"
       height="1em"
-      style="--b-icon-color: var(--bgtxt-blue-normal);"
+      style="--b-icon-color: var(--alpha-bg-blue-normal);"
       viewBox="0 0 24 24"
       width="1em"
       xmlns="http://www.w3.org/2000/svg"
@@ -44,7 +44,7 @@ exports[`NavGroup Test > Snapshot > Active 1`] = `
       data-testid="bezier-icon"
       fill="none"
       height="1em"
-      style="--b-icon-color: var(--bgtxt-orange-normal);"
+      style="--b-icon-color: var(--alpha-bg-orange-normal);"
       viewBox="0 0 24 24"
       width="1em"
       xmlns="http://www.w3.org/2000/svg"
@@ -77,7 +77,7 @@ exports[`NavGroup Test > Snapshot > Not active 1`] = `
       data-testid="bezier-nav-group-left-icon"
       fill="none"
       height="1em"
-      style="--b-icon-color: var(--txt-black-dark);"
+      style="--b-icon-color: var(--alpha-fg-black-dark);"
       viewBox="0 0 24 24"
       width="1em"
       xmlns="http://www.w3.org/2000/svg"
@@ -104,7 +104,7 @@ exports[`NavGroup Test > Snapshot > Not active 1`] = `
       data-testid="bezier-icon"
       fill="none"
       height="1em"
-      style="--b-icon-color: var(--bgtxt-orange-normal);"
+      style="--b-icon-color: var(--alpha-bg-orange-normal);"
       viewBox="0 0 24 24"
       width="1em"
       xmlns="http://www.w3.org/2000/svg"
diff --git a/packages/bezier-react/src/components/NavItem/NavItem.test.tsx b/packages/bezier-react/src/components/NavItem/NavItem.test.tsx
index 8b2f21682d..457ca111be 100644
--- a/packages/bezier-react/src/components/NavItem/NavItem.test.tsx
+++ b/packages/bezier-react/src/components/NavItem/NavItem.test.tsx
@@ -45,22 +45,4 @@ describe('NavItem Test >', () => {
       expect(rendered).toMatchSnapshot()
     })
   })
-
-  describe('LeftIcon Color', () => {
-    it('Icon color should be "bgtxt-blue-normal" when active prop is true', () => {
-      const { getByTestId } = renderNavItem({ active: true })
-
-      const rendered = getByTestId(NAV_ITEM_LEFT_ICON_TEST_ID)
-
-      expect(rendered).toHaveStyle('--b-icon-color: var(--bgtxt-blue-normal);')
-    })
-
-    it('Icon color should be "txt-black-dark" when active prop is false', () => {
-      const { getByTestId } = renderNavItem({ active: false })
-
-      const rendered = getByTestId(NAV_ITEM_LEFT_ICON_TEST_ID)
-
-      expect(rendered).toHaveStyle('--b-icon-color: var(--txt-black-dark);')
-    })
-  })
 })
diff --git a/packages/bezier-react/src/components/NavItem/__snapshots__/NavItem.test.tsx.snap b/packages/bezier-react/src/components/NavItem/__snapshots__/NavItem.test.tsx.snap
index 82aa4a91f2..e7254f60ce 100644
--- a/packages/bezier-react/src/components/NavItem/__snapshots__/NavItem.test.tsx.snap
+++ b/packages/bezier-react/src/components/NavItem/__snapshots__/NavItem.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`NavItem Test > Snapshot > Active 1`] = `
       data-testid="bezier-nav-item-left-icon"
       fill="none"
       height="1em"
-      style="--b-icon-color: var(--bgtxt-blue-normal);"
+      style="--b-icon-color: var(--alpha-bg-blue-normal);"
       viewBox="0 0 24 24"
       width="1em"
       xmlns="http://www.w3.org/2000/svg"
@@ -52,7 +52,7 @@ exports[`NavItem Test > Snapshot > Not active 1`] = `
       data-testid="bezier-nav-item-left-icon"
       fill="none"
       height="1em"
-      style="--b-icon-color: var(--txt-black-dark);"
+      style="--b-icon-color: var(--alpha-fg-black-dark);"
       viewBox="0 0 24 24"
       width="1em"
       xmlns="http://www.w3.org/2000/svg"
diff --git a/packages/bezier-react/src/components/SmoothCornersBox/SmoothCornersBox.test.tsx b/packages/bezier-react/src/components/SmoothCornersBox/SmoothCornersBox.test.tsx
index f6110fb21e..51de554c38 100644
--- a/packages/bezier-react/src/components/SmoothCornersBox/SmoothCornersBox.test.tsx
+++ b/packages/bezier-react/src/components/SmoothCornersBox/SmoothCornersBox.test.tsx
@@ -49,18 +49,12 @@ describe('SmoothCornersBox', () => {
       expect(
         styles.getPropertyValue('--b-smooth-corners-box-shadow-spread-radius')
       ).toBe('10px')
-      expect(
-        styles.getPropertyValue('--b-smooth-corners-box-shadow-color')
-      ).toBe('var(--bg-black-light)')
       expect(styles.getPropertyValue('--b-smooth-corners-box-padding')).toBe(
         '20px'
       )
       expect(styles.getPropertyValue('--b-smooth-corners-box-margin')).toBe(
         '10px'
       )
-      expect(
-        styles.getPropertyValue('--b-smooth-corners-box-background-color')
-      ).toBe('var(--bg-black-light)')
       expect(
         styles.getPropertyValue('--b-smooth-corners-box-background-image')
       ).toBe('url(foo/bar)')
diff --git a/packages/bezier-react/src/components/Spinner/Spinner.test.tsx b/packages/bezier-react/src/components/Spinner/Spinner.test.tsx
index db32335e5e..b3f8244632 100644
--- a/packages/bezier-react/src/components/Spinner/Spinner.test.tsx
+++ b/packages/bezier-react/src/components/Spinner/Spinner.test.tsx
@@ -38,13 +38,6 @@ describe('Spinner >', () => {
     expect(renderedSpinner).toHaveClass('test-class')
   })
 
-  it('should recieve color', () => {
-    const color = 'bg-black-lighter'
-    const { getByTestId } = renderSpinner({ color })
-    const renderedSpinner = getByTestId(SPINNER_TEST_ID)
-    expect(renderedSpinner).toHaveStyle(`--b-spinner-color: var(--${color})`)
-  })
-
   it('should receive size', () => {
     const { getByTestId } = renderSpinner({ size: 'm' })
     const renderedSpinner = getByTestId(SPINNER_TEST_ID)