From 89237e9c04aedd612c49214c507998bb43f0f050 Mon Sep 17 00:00:00 2001
From: Ed Sungik Choi <sungik.dev@gmail.com>
Date: Mon, 6 Jan 2025 22:27:51 +0900
Subject: [PATCH] chore: wip

---
 .../components/AlphaButton/Button.module.scss |  90 ++++++------
 .../FloatingButton.module.scss                |  64 ++++-----
 .../FloatingIconButton.module.scss            |  62 ++++-----
 .../AlphaIconButton/IconButton.module.scss    |  80 +++++------
 .../components/AlphaLoader/Loader.module.scss |  12 +-
 .../AlphaStatusBadge/StatusBadge.module.scss  |   4 +-
 .../AlphaStatusBadge/StatusBadge.tsx          |   4 +-
 .../ToggleButton.module.scss                  |  20 +--
 .../ToggleEmojiButtonGroup.module.scss        |  14 +-
 .../bezier-react/src/components/Icon/Icon.tsx |   4 +-
 .../SmoothCornersBox/SmoothCornersBox.tsx     |   9 +-
 .../src/components/Spinner/Spinner.tsx        |   4 +-
 .../src/components/Status/Status.tsx          |   4 +-
 .../bezier-react/src/components/Text/Text.tsx |   4 +-
 .../bezier-react/src/stories/alpha-color.mdx  |  14 +-
 .../bezier-react/src/stories/alpha-shadow.mdx |  14 +-
 .../src/styles/_alpha-tokens.scss             |   2 -
 packages/bezier-react/src/styles/_tokens.scss |   2 +
 packages/bezier-react/src/styles/index.scss   |   6 +-
 .../bezier-react/src/types/alpha-tokens.ts    |  25 ++--
 .../bezier-react/src/types/props-helpers.ts   |   6 +-
 packages/bezier-react/src/utils/style.ts      | 128 +++++++++++++++++-
 .../bezier-tokens/scripts/lib/transform.ts    |   6 +
 23 files changed, 353 insertions(+), 225 deletions(-)
 delete mode 100644 packages/bezier-react/src/styles/_alpha-tokens.scss

diff --git a/packages/bezier-react/src/components/AlphaButton/Button.module.scss b/packages/bezier-react/src/components/AlphaButton/Button.module.scss
index 5a4ded7793..2f2c063279 100644
--- a/packages/bezier-react/src/components/AlphaButton/Button.module.scss
+++ b/packages/bezier-react/src/components/AlphaButton/Button.module.scss
@@ -6,28 +6,28 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
 
 .Button {
   $primary-color-map: (
-    blue: --alpha-color-primary-bg-normal,
-    cobalt: --alpha-color-accent-bg-normal,
-    red: --alpha-color-critical-bg-normal,
-    orange: --alpha-color-warning-bg-normal,
-    green: --alpha-color-success-bg-normal,
-    pink: --alpha-color-bg-pink-normal,
-    purple: --alpha-color-bg-purple-normal,
-    dark-grey: --alpha-color-bg-grey-darkest,
-    light-grey: --alpha-color-bg-black-dark,
-    white-absolute: --alpha-color-bg-absolute-white-dark,
+    blue: --alpha-primary-bg-normal,
+    cobalt: --alpha-accent-bg-normal,
+    red: --alpha-critical-bg-normal,
+    orange: --alpha-warning-bg-normal,
+    green: --alpha-success-bg-normal,
+    pink: --alpha-bg-pink-normal,
+    purple: --alpha-bg-purple-normal,
+    dark-grey: --alpha-bg-grey-darkest,
+    light-grey: --alpha-bg-black-dark,
+    white-absolute: --alpha-bg-absolute-white-dark,
   );
   $secondary-color-map: (
-    blue: --alpha-color-primary-bg-lightest,
-    cobalt: --alpha-color-accent-bg-lightest,
-    red: --alpha-color-critical-bg-lightest,
-    orange: --alpha-color-warning-bg-lightest,
-    green: --alpha-color-success-bg-lightest,
-    pink: --alpha-color-bg-pink-lightest,
-    purple: --alpha-color-bg-purple-lightest,
-    dark-grey: --alpha-color-bg-black-lighter,
-    light-grey: --alpha-color-bg-black-lighter,
-    white-absolute: --alpha-color-bg-absolute-white-lightest,
+    blue: --alpha-primary-bg-lightest,
+    cobalt: --alpha-accent-bg-lightest,
+    red: --alpha-critical-bg-lightest,
+    orange: --alpha-warning-bg-lightest,
+    green: --alpha-success-bg-lightest,
+    pink: --alpha-bg-pink-lightest,
+    purple: --alpha-bg-purple-lightest,
+    dark-grey: --alpha-bg-black-lighter,
+    light-grey: --alpha-bg-black-lighter,
+    white-absolute: --alpha-bg-absolute-white-lightest,
   );
 
   position: relative;
@@ -101,48 +101,48 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     @each $color in $chromatic-colors {
       &:where(.color-#{'' + $color}) {
         /* stylelint-disable-next-line bezier/validate-token */
-        background-color: var(--alpha-color-bg-#{$color}-transparent);
+        background-color: var(--alpha-bg-#{$color}-transparent);
       }
     }
 
     &:where(.color-dark-grey, .color-light-grey) {
-      background-color: var(--alpha-color-bg-black-transparent);
+      background-color: var(--alpha-bg-black-transparent);
     }
 
     &:where(.color-white-absolute) {
-      background-color: var(--alpha-color-bg-absolute-white-transparent);
+      background-color: var(--alpha-bg-absolute-white-transparent);
     }
   }
 
   /* color */
   /* stylelint-disable-next-line no-duplicate-selectors */
   &:where(.variant-primary) {
-    color: var(--alpha-color-fg-absolute-white-dark);
+    color: var(--alpha-fg-absolute-white-dark);
 
     &:where(.color-dark-grey) {
-      color: var(--alpha-color-fg-white-normal);
+      color: var(--alpha-fg-white-normal);
     }
 
     &:where(.color-light-grey) {
-      color: var(--alpha-color-fg-absolute-white-normal);
+      color: var(--alpha-fg-absolute-white-normal);
     }
 
     &:where(.color-white-absolute) {
-      color: var(--alpha-color-fg-absolute-black-normal);
+      color: var(--alpha-fg-absolute-black-normal);
     }
   }
 
   &:where(.variant-secondary, .variant-tertiary) {
     $color-map: (
-      blue: var(--alpha-color-primary-fg-normal),
-      cobalt: var(--alpha-color-accent-fg-normal),
-      red: var(--alpha-color-critical-fg-normal),
-      orange: var(--alpha-color-warning-fg-normal),
-      green: var(--alpha-color-success-fg-normal),
-      pink: var(--alpha-color-fg-pink-normal),
-      purple: var(--alpha-color-fg-purple-normal),
-      dark-grey: var(--alpha-color-fg-black-darkest),
-      light-grey: var(--alpha-color-fg-black-darker),
+      blue: var(--alpha-primary-fg-normal),
+      cobalt: var(--alpha-accent-fg-normal),
+      red: var(--alpha-critical-fg-normal),
+      orange: var(--alpha-warning-fg-normal),
+      green: var(--alpha-success-fg-normal),
+      pink: var(--alpha-fg-pink-normal),
+      purple: var(--alpha-fg-purple-normal),
+      dark-grey: var(--alpha-fg-black-darkest),
+      light-grey: var(--alpha-fg-black-darker),
     );
 
     @each $button-color, $color in $color-map {
@@ -153,24 +153,24 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
 
     &:where(.color-dark-grey) {
       & :where(.ButtonIcon) {
-        color: var(--alpha-color-fg-black-darker);
+        color: var(--alpha-fg-black-darker);
       }
     }
 
     &:where(.color-light-grey) {
       & :where(.ButtonIcon) {
-        color: var(--alpha-color-fg-black-dark);
+        color: var(--alpha-fg-black-dark);
       }
     }
   }
 
   &:where(.variant-tertiary, .variant-secondary):where(.color-white-absolute) {
     & :where(.ButtonIcon) {
-      color: var(--alpha-color-fg-absolute-white-light);
+      color: var(--alpha-fg-absolute-white-light);
     }
 
     & :where(.ButtonText) {
-      color: var(--alpha-color-fg-absolute-white-normal);
+      color: var(--alpha-fg-absolute-white-normal);
     }
   }
 
@@ -215,18 +215,16 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
       @each $color in $chromatic-colors {
         &:where(.color-#{'' + $color}) {
           /* stylelint-disable-next-line bezier/validate-token */
-          background-color: var(--alpha-color-bg-#{$color}-transparent-hovered);
+          background-color: var(--alpha-bg-#{$color}-transparent-hovered);
         }
       }
 
       &:where(.color-dark-grey, .color-light-grey) {
-        background-color: var(--alpha-color-bg-black-transparent-hovered);
+        background-color: var(--alpha-bg-black-transparent-hovered);
       }
 
       &:where(.color-white-absolute) {
-        background-color: var(
-          --alpha-color-bg-absolute-white-transparent-hovered
-        );
+        background-color: var(--alpha-bg-absolute-white-transparent-hovered);
       }
     }
 
@@ -244,7 +242,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
 
     &:where(.color-white-absolute.variant-tertiary) {
       & :where(.ButtonIcon) {
-        color: var(--alpha-color-fg-absolute-white-normal);
+        color: var(--alpha-fg-absolute-white-normal);
       }
     }
   }
diff --git a/packages/bezier-react/src/components/AlphaFloatingButton/FloatingButton.module.scss b/packages/bezier-react/src/components/AlphaFloatingButton/FloatingButton.module.scss
index 50a209afcf..9036c34f00 100644
--- a/packages/bezier-react/src/components/AlphaFloatingButton/FloatingButton.module.scss
+++ b/packages/bezier-react/src/components/AlphaFloatingButton/FloatingButton.module.scss
@@ -6,41 +6,41 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
 
 .FloatingButton {
   $background-color-map: (
-    blue: --alpha-color-primary-bg-normal,
-    cobalt: --alpha-color-accent-bg-normal,
-    red: --alpha-color-critical-bg-normal,
-    orange: --alpha-color-warning-bg-normal,
-    green: --alpha-color-success-bg-normal,
-    pink: --alpha-color-bg-pink-normal,
-    purple: --alpha-color-bg-purple-normal,
-    dark-grey: --alpha-color-bg-grey-darkest,
-    light-grey: --alpha-color-bg-grey-dark,
+    blue: --alpha-primary-bg-normal,
+    cobalt: --alpha-accent-bg-normal,
+    red: --alpha-critical-bg-normal,
+    orange: --alpha-warning-bg-normal,
+    green: --alpha-success-bg-normal,
+    pink: --alpha-bg-pink-normal,
+    purple: --alpha-bg-purple-normal,
+    dark-grey: --alpha-bg-grey-darkest,
+    light-grey: --alpha-bg-grey-dark,
   );
   $color-map: (
-    blue: --alpha-color-primary-fg-normal,
-    cobalt: --alpha-color-accent-fg-normal,
-    red: --alpha-color-critical-fg-normal,
-    orange: --alpha-color-warning-fg-normal,
-    green: --alpha-color-success-fg-normal,
-    pink: --alpha-color-fg-pink-normal,
-    purple: --alpha-color-fg-purple-normal,
-    dark-grey: --alpha-color-fg-black-darkest,
-    light-grey: --alpha-color-fg-black-darker,
+    blue: --alpha-primary-fg-normal,
+    cobalt: --alpha-accent-fg-normal,
+    red: --alpha-critical-fg-normal,
+    orange: --alpha-warning-fg-normal,
+    green: --alpha-success-fg-normal,
+    pink: --alpha-fg-pink-normal,
+    purple: --alpha-fg-purple-normal,
+    dark-grey: --alpha-fg-black-darkest,
+    light-grey: --alpha-fg-black-darker,
   );
   $hovered-color-map: (
-    blue: --alpha-color-primary-fg-dark,
-    cobalt: --alpha-color-accent-fg-dark,
-    red: --alpha-color-critical-fg-dark,
-    orange: --alpha-color-warning-fg-dark,
-    green: --alpha-color-success-fg-dark,
-    pink: --alpha-color-fg-pink-dark,
-    purple: --alpha-color-fg-purple-dark,
-    dark-grey: --alpha-color-fg-black-darkest,
-    light-grey: --alpha-color-fg-black-darkest,
+    blue: --alpha-primary-fg-dark,
+    cobalt: --alpha-accent-fg-dark,
+    red: --alpha-critical-fg-dark,
+    orange: --alpha-warning-fg-dark,
+    green: --alpha-success-fg-dark,
+    pink: --alpha-fg-pink-dark,
+    purple: --alpha-fg-purple-dark,
+    dark-grey: --alpha-fg-black-darkest,
+    light-grey: --alpha-fg-black-darkest,
   );
   $icon-color-map: (
-    dark-grey: --alpha-color-fg-black-darker,
-    light-grey: --alpha-color-fg-black-dark,
+    dark-grey: --alpha-fg-black-darker,
+    light-grey: --alpha-fg-black-dark,
   );
 
   position: relative;
@@ -108,16 +108,16 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
   }
 
   &:where(.variant-secondary) {
-    background-color: var(--alpha-color-bg-white-higher);
+    background-color: var(--alpha-bg-white-higher);
   }
 
   /* color */
   /* stylelint-disable-next-line no-duplicate-selectors */
   &:where(.variant-primary) {
-    color: var(--alpha-color-fg-absolute-white-dark);
+    color: var(--alpha-fg-absolute-white-dark);
 
     &:where(.color-dark-grey) {
-      color: var(--alpha-color-fg-white-normal);
+      color: var(--alpha-fg-white-normal);
     }
   }
 
diff --git a/packages/bezier-react/src/components/AlphaFloatingIconButton/FloatingIconButton.module.scss b/packages/bezier-react/src/components/AlphaFloatingIconButton/FloatingIconButton.module.scss
index f2a740903f..6e41912749 100644
--- a/packages/bezier-react/src/components/AlphaFloatingIconButton/FloatingIconButton.module.scss
+++ b/packages/bezier-react/src/components/AlphaFloatingIconButton/FloatingIconButton.module.scss
@@ -6,37 +6,37 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
 
 .FloatingIconButton {
   $primary-color-map: (
-    blue: --alpha-color-primary-bg-normal,
-    cobalt: --alpha-color-accent-bg-normal,
-    red: --alpha-color-critical-bg-normal,
-    orange: --alpha-color-warning-bg-normal,
-    green: --alpha-color-success-bg-normal,
-    pink: --alpha-color-bg-pink-normal,
-    purple: --alpha-color-bg-purple-normal,
-    dark-grey: --alpha-color-bg-grey-darkest,
-    light-grey: --alpha-color-bg-grey-dark,
+    blue: --alpha-primary-bg-normal,
+    cobalt: --alpha-accent-bg-normal,
+    red: --alpha-critical-bg-normal,
+    orange: --alpha-warning-bg-normal,
+    green: --alpha-success-bg-normal,
+    pink: --alpha-bg-pink-normal,
+    purple: --alpha-bg-purple-normal,
+    dark-grey: --alpha-bg-grey-darkest,
+    light-grey: --alpha-bg-grey-dark,
   );
   $color-map: (
-    blue: --alpha-color-primary-fg-normal,
-    cobalt: --alpha-color-accent-fg-normal,
-    red: --alpha-color-critical-fg-normal,
-    orange: --alpha-color-warning-fg-normal,
-    green: --alpha-color-success-fg-normal,
-    pink: --alpha-color-fg-pink-normal,
-    purple: --alpha-color-fg-purple-normal,
-    dark-grey: --alpha-color-fg-black-darker,
-    light-grey: --alpha-color-fg-black-dark,
+    blue: --alpha-primary-fg-normal,
+    cobalt: --alpha-accent-fg-normal,
+    red: --alpha-critical-fg-normal,
+    orange: --alpha-warning-fg-normal,
+    green: --alpha-success-fg-normal,
+    pink: --alpha-fg-pink-normal,
+    purple: --alpha-fg-purple-normal,
+    dark-grey: --alpha-fg-black-darker,
+    light-grey: --alpha-fg-black-dark,
   );
   $hovered-color-map: (
-    blue: --alpha-color-primary-fg-dark,
-    cobalt: --alpha-color-accent-fg-dark,
-    red: --alpha-color-critical-fg-dark,
-    orange: --alpha-color-warning-fg-dark,
-    green: --alpha-color-success-fg-dark,
-    pink: --alpha-color-fg-pink-dark,
-    purple: --alpha-color-fg-purple-dark,
-    dark-grey: --alpha-color-fg-black-darkest,
-    light-grey: --alpha-color-fg-black-darker,
+    blue: --alpha-primary-fg-dark,
+    cobalt: --alpha-accent-fg-dark,
+    red: --alpha-critical-fg-dark,
+    orange: --alpha-warning-fg-dark,
+    green: --alpha-success-fg-dark,
+    pink: --alpha-fg-pink-dark,
+    purple: --alpha-fg-purple-dark,
+    dark-grey: --alpha-fg-black-darkest,
+    light-grey: --alpha-fg-black-darker,
   );
 
   position: relative;
@@ -89,20 +89,20 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
   }
 
   &:where(.variant-secondary) {
-    background-color: var(--alpha-color-bg-white-higher);
+    background-color: var(--alpha-bg-white-higher);
   }
 
   /* color */
   /* stylelint-disable-next-line no-duplicate-selectors */
   &:where(.variant-primary) {
-    color: var(--alpha-color-fg-absolute-white-dark);
+    color: var(--alpha-fg-absolute-white-dark);
 
     &:where(.color-dark-grey) {
-      color: var(--alpha-color-fg-white-normal);
+      color: var(--alpha-fg-white-normal);
     }
 
     &:where(.color-light-grey) {
-      color: var(--alpha-color-fg-absolute-white-dark);
+      color: var(--alpha-fg-absolute-white-dark);
     }
   }
 
diff --git a/packages/bezier-react/src/components/AlphaIconButton/IconButton.module.scss b/packages/bezier-react/src/components/AlphaIconButton/IconButton.module.scss
index c900b6d333..3ed311e852 100644
--- a/packages/bezier-react/src/components/AlphaIconButton/IconButton.module.scss
+++ b/packages/bezier-react/src/components/AlphaIconButton/IconButton.module.scss
@@ -43,16 +43,16 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
   /* background-color */
   &:where(.variant-primary) {
     $background-color-by-color: (
-      blue: var(--alpha-color-primary-bg-normal),
-      cobalt: var(--alpha-color-accent-bg-normal),
-      red: var(--alpha-color-critical-bg-normal),
-      orange: var(--alpha-color-warning-bg-normal),
-      green: var(--alpha-color-success-bg-normal),
-      pink: var(--alpha-color-bg-pink-normal),
-      purple: var(--alpha-color-bg-purple-normal),
-      dark-grey: var(--alpha-color-bg-grey-darkest),
-      light-grey: var(--alpha-color-bg-black-dark),
-      white-absolute: var(--alpha-color-bg-absolute-white-dark),
+      blue: var(--alpha-primary-bg-normal),
+      cobalt: var(--alpha-accent-bg-normal),
+      red: var(--alpha-critical-bg-normal),
+      orange: var(--alpha-warning-bg-normal),
+      green: var(--alpha-success-bg-normal),
+      pink: var(--alpha-bg-pink-normal),
+      purple: var(--alpha-bg-purple-normal),
+      dark-grey: var(--alpha-bg-grey-darkest),
+      light-grey: var(--alpha-bg-black-dark),
+      white-absolute: var(--alpha-bg-absolute-white-dark),
     );
 
     @each $color, $background-color in $background-color-by-color {
@@ -64,16 +64,16 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
 
   &:where(.variant-secondary) {
     $background-color-by-color: (
-      blue: var(--alpha-color-primary-bg-lightest),
-      cobalt: var(--alpha-color-accent-bg-lightest),
-      red: var(--alpha-color-critical-bg-lightest),
-      orange: var(--alpha-color-warning-bg-lightest),
-      green: var(--alpha-color-success-bg-lightest),
-      pink: var(--alpha-color-bg-pink-lightest),
-      purple: var(--alpha-color-bg-purple-lightest),
-      dark-grey: var(--alpha-color-bg-black-lighter),
-      light-grey: var(--alpha-color-bg-black-lighter),
-      white-absolute: var(--alpha-color-bg-absolute-white-lightest),
+      blue: var(--alpha-primary-bg-lightest),
+      cobalt: var(--alpha-accent-bg-lightest),
+      red: var(--alpha-critical-bg-lightest),
+      orange: var(--alpha-warning-bg-lightest),
+      green: var(--alpha-success-bg-lightest),
+      pink: var(--alpha-bg-pink-lightest),
+      purple: var(--alpha-bg-purple-lightest),
+      dark-grey: var(--alpha-bg-black-lighter),
+      light-grey: var(--alpha-bg-black-lighter),
+      white-absolute: var(--alpha-bg-absolute-white-lightest),
     );
 
     @each $color, $background-color in $background-color-by-color {
@@ -87,48 +87,48 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     @each $color in $chromatic-colors {
       &:where(.color-#{'' + $color}) {
         /* stylelint-disable-next-line bezier/validate-token */
-        background-color: var(--alpha-color-bg-#{$color}-transparent);
+        background-color: var(--alpha-bg-#{$color}-transparent);
       }
     }
 
     &:where(.color-dark-grey, .color-light-grey) {
-      background-color: var(--alpha-color-bg-black-transparent);
+      background-color: var(--alpha-bg-black-transparent);
     }
 
     &:where(.color-white-absolute) {
-      background-color: var(--alpha-color-bg-absolute-white-transparent);
+      background-color: var(--alpha-bg-absolute-white-transparent);
     }
   }
 
   /* color */
   /* stylelint-disable-next-line no-duplicate-selectors */
   &:where(.variant-primary) {
-    color: var(--alpha-color-fg-absolute-white-dark);
+    color: var(--alpha-fg-absolute-white-dark);
 
     &:where(.color-dark-grey) {
-      color: var(--alpha-color-fg-white-normal);
+      color: var(--alpha-fg-white-normal);
     }
 
     &:where(.color-light-grey) {
-      color: var(--alpha-color-fg-absolute-white-normal);
+      color: var(--alpha-fg-absolute-white-normal);
     }
 
     &:where(.color-white-absolute) {
-      color: var(--alpha-color-fg-absolute-black-normal);
+      color: var(--alpha-fg-absolute-black-normal);
     }
   }
 
   &:where(.variant-secondary, .variant-tertiary) {
     $color-map: (
-      blue: var(--alpha-color-primary-fg-normal),
-      cobalt: var(--alpha-color-accent-fg-normal),
-      red: var(--alpha-color-critical-fg-normal),
-      orange: var(--alpha-color-warning-fg-normal),
-      green: var(--alpha-color-success-fg-normal),
-      pink: var(--alpha-color-fg-pink-normal),
-      purple: var(--alpha-color-fg-purple-normal),
-      dark-grey: var(--alpha-color-fg-black-darkest),
-      light-grey: var(--alpha-color-fg-black-darker),
+      blue: var(--alpha-primary-fg-normal),
+      cobalt: var(--alpha-accent-fg-normal),
+      red: var(--alpha-critical-fg-normal),
+      orange: var(--alpha-warning-fg-normal),
+      green: var(--alpha-success-fg-normal),
+      pink: var(--alpha-fg-pink-normal),
+      purple: var(--alpha-fg-purple-normal),
+      dark-grey: var(--alpha-fg-black-darkest),
+      light-grey: var(--alpha-fg-black-darker),
     );
 
     @each $button-color, $color in $color-map {
@@ -139,20 +139,20 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
 
     &:where(.color-dark-grey) {
       & :where(.ButtonIcon) {
-        color: var(--alpha-color-fg-black-darker);
+        color: var(--alpha-fg-black-darker);
       }
     }
 
     &:where(.color-light-grey) {
       & :where(.ButtonIcon) {
-        color: var(--alpha-color-fg-black-dark);
+        color: var(--alpha-fg-black-dark);
       }
     }
   }
 
   &:where(.variant-tertiary, .variant-secondary):where(.color-white-absolute) {
     & :where(.ButtonIcon) {
-      color: var(--alpha-color-fg-absolute-white-normal);
+      color: var(--alpha-fg-absolute-white-normal);
     }
   }
 
@@ -238,7 +238,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
 
     &:where(.color-white-absolute.variant-tertiary) {
       & :where(.ButtonIcon) {
-        color: var(--alpha-color-fg-absolute-white-normal);
+        color: var(--alpha-fg-absolute-white-normal);
       }
     }
   }
diff --git a/packages/bezier-react/src/components/AlphaLoader/Loader.module.scss b/packages/bezier-react/src/components/AlphaLoader/Loader.module.scss
index 886a2b1816..cc9813d034 100644
--- a/packages/bezier-react/src/components/AlphaLoader/Loader.module.scss
+++ b/packages/bezier-react/src/components/AlphaLoader/Loader.module.scss
@@ -59,17 +59,17 @@
   }
 
   &:where(.variant-primary) {
-    --b-loader-track-color: var(--alpha-color-primary-bg-lightest);
-    --b-loader-indicator-color: var(--alpha-color-fg-blue-normal);
+    --b-loader-track-color: var(--alpha-primary-bg-lightest);
+    --b-loader-indicator-color: var(--alpha-fg-blue-normal);
   }
 
   &:where(.variant-secondary) {
-    --b-loader-track-color: var(--alpha-color-bg-black-light);
-    --b-loader-indicator-color: var(--alpha-color-fg-black-light);
+    --b-loader-track-color: var(--alpha-bg-black-light);
+    --b-loader-indicator-color: var(--alpha-fg-black-light);
   }
 
   &:where(.variant-on-overlay) {
-    --b-loader-track-color: var(--alpha-color-bg-absolute-white-lightest);
-    --b-loader-indicator-color: var(--alpha-color-fg-absolute-white-light);
+    --b-loader-track-color: var(--alpha-bg-absolute-white-lightest);
+    --b-loader-indicator-color: var(--alpha-fg-absolute-white-light);
   }
 }
diff --git a/packages/bezier-react/src/components/AlphaStatusBadge/StatusBadge.module.scss b/packages/bezier-react/src/components/AlphaStatusBadge/StatusBadge.module.scss
index 4d54b9e54f..b2f30fa17d 100644
--- a/packages/bezier-react/src/components/AlphaStatusBadge/StatusBadge.module.scss
+++ b/packages/bezier-react/src/components/AlphaStatusBadge/StatusBadge.module.scss
@@ -12,8 +12,8 @@
   width: var(--b-status-size);
   height: var(--b-status-size);
 
-  background-color: var(--alpha-color-bg-white-highest);
-  border: var(--b-status-border-width) solid var(--alpha-color-bg-white-highest);
+  background-color: var(--alpha-bg-white-highest);
+  border: var(--b-status-border-width) solid var(--alpha-bg-white-highest);
   border-radius: 50%;
 
   &::after {
diff --git a/packages/bezier-react/src/components/AlphaStatusBadge/StatusBadge.tsx b/packages/bezier-react/src/components/AlphaStatusBadge/StatusBadge.tsx
index a98294df5f..5a2815726a 100644
--- a/packages/bezier-react/src/components/AlphaStatusBadge/StatusBadge.tsx
+++ b/packages/bezier-react/src/components/AlphaStatusBadge/StatusBadge.tsx
@@ -6,7 +6,7 @@ import { MoonFilledIcon } from '@channel.io/bezier-icons'
 import classNames from 'classnames'
 
 import { type SemanticColor } from '~/src/types/tokens'
-import { cssVar } from '~/src/utils/style'
+import { colorTokenCssVar } from '~/src/utils/style'
 
 import { Icon } from '~/src/components/Icon'
 
@@ -54,7 +54,7 @@ export const StatusBadge = forwardRef<HTMLDivElement, StatusBadgeProps>(
         ref={forwardedRef}
         style={
           {
-            '--b-status-bg-color': cssVar(backgroundColor),
+            '--b-status-bg-color': colorTokenCssVar(backgroundColor),
             ...style,
           } as CSSProperties
         }
diff --git a/packages/bezier-react/src/components/AlphaToggleButton/ToggleButton.module.scss b/packages/bezier-react/src/components/AlphaToggleButton/ToggleButton.module.scss
index f29776e7dc..c940a6bad6 100644
--- a/packages/bezier-react/src/components/AlphaToggleButton/ToggleButton.module.scss
+++ b/packages/bezier-react/src/components/AlphaToggleButton/ToggleButton.module.scss
@@ -19,13 +19,13 @@
   }
 
   &:where(.variant-primary) {
-    color: var(--alpha-color-fg-black-darkest);
-    background-color: var(--alpha-color-bg-grey-lightest);
+    color: var(--alpha-fg-black-darkest);
+    background-color: var(--alpha-bg-grey-lightest);
     box-shadow: var(--alpha-shadow-input-default);
   }
 
   &:where(.variant-secondary) {
-    background-color: var(--alpha-color-bg-black-lightest);
+    background-color: var(--alpha-bg-black-lightest);
   }
 
   &:where(.shape-rectangle) {
@@ -39,11 +39,11 @@
   /* visual effect on interaction */
   &:where(:hover) {
     &:where(.variant-primary) {
-      background-color: var(--alpha-color-bg-grey-lighter);
+      background-color: var(--alpha-bg-grey-lighter);
     }
 
     &:where(.variant-secondary) {
-      background-color: var(--alpha-color-bg-black-lighter);
+      background-color: var(--alpha-bg-black-lighter);
     }
 
     &:where([data-state='off']) {
@@ -54,16 +54,16 @@
   }
 
   &:where([data-state='on']) {
-    color: var(--alpha-color-fg-blue-normal);
+    color: var(--alpha-fg-blue-normal);
 
     &:where(.variant-primary) {
-      background-color: var(--alpha-color-bg-blue-lightest);
+      background-color: var(--alpha-bg-blue-lightest);
       box-shadow: var(--alpha-shadow-input-default);
-      box-shadow: 0 0 0 1px var(--alpha-color-primary-bg-normal) inset;
+      box-shadow: 0 0 0 1px var(--alpha-primary-bg-normal) inset;
     }
 
     &:where(.variant-secondary) {
-      background-color: var(--alpha-color-primary-bg-lighter);
+      background-color: var(--alpha-primary-bg-lighter);
     }
 
     & :where(.ButtonText) {
@@ -77,7 +77,7 @@
 
   /* internal components */
   &:where([data-state='off']) :where(.ButtonIcon) {
-    color: var(--alpha-color-fg-black-dark);
+    color: var(--alpha-fg-black-dark);
   }
 
   & :where(.ButtonContent) {
diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss
index 70a76542b3..7565aa8608 100644
--- a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss
@@ -43,28 +43,28 @@
   }
 
   &:where(.variant-primary) {
-    background-color: var(--alpha-color-bg-grey-lightest);
+    background-color: var(--alpha-bg-grey-lightest);
     box-shadow: var(--alpha-shadow-input-default);
 
     &:where(&:hover) {
-      background-color: var(--alpha-color-bg-grey-lighter);
+      background-color: var(--alpha-bg-grey-lighter);
     }
 
     &:where([data-state='on']) {
-      background-color: var(--alpha-color-bg-blue-lightest);
-      box-shadow: 0 0 0 1px var(--alpha-color-primary-bg-normal) inset;
+      background-color: var(--alpha-bg-blue-lightest);
+      box-shadow: 0 0 0 1px var(--alpha-primary-bg-normal) inset;
     }
   }
 
   &:where(.variant-secondary) {
-    background-color: var(--alpha-color-bg-black-lightest);
+    background-color: var(--alpha-bg-black-lightest);
 
     &:where(&:hover) {
-      background-color: var(--alpha-color-bg-black-lighter);
+      background-color: var(--alpha-bg-black-lighter);
     }
 
     &:where([data-state='on']) {
-      background-color: var(--alpha-color-primary-bg-lighter);
+      background-color: var(--alpha-primary-bg-lighter);
     }
   }
 
diff --git a/packages/bezier-react/src/components/Icon/Icon.tsx b/packages/bezier-react/src/components/Icon/Icon.tsx
index 194006df03..0cb7fd524b 100644
--- a/packages/bezier-react/src/components/Icon/Icon.tsx
+++ b/packages/bezier-react/src/components/Icon/Icon.tsx
@@ -5,7 +5,7 @@ import * as React from 'react'
 import classNames from 'classnames'
 
 import { getMarginStyles, splitByMarginProps } from '~/src/types/props-helpers'
-import { tokenCssVar } from '~/src/utils/style'
+import { colorTokenCssVar } from '~/src/utils/style'
 
 import { type IconProps } from './Icon.types'
 
@@ -32,7 +32,7 @@ export const Icon = memo(
         ref={forwardedRef}
         style={
           {
-            '--b-icon-color': tokenCssVar(color),
+            '--b-icon-color': colorTokenCssVar(color),
             ...marginStyles.style,
             ...style,
           } as React.CSSProperties
diff --git a/packages/bezier-react/src/components/SmoothCornersBox/SmoothCornersBox.tsx b/packages/bezier-react/src/components/SmoothCornersBox/SmoothCornersBox.tsx
index 7c9e54870d..3b957567b4 100644
--- a/packages/bezier-react/src/components/SmoothCornersBox/SmoothCornersBox.tsx
+++ b/packages/bezier-react/src/components/SmoothCornersBox/SmoothCornersBox.tsx
@@ -5,7 +5,7 @@ import * as React from 'react'
 
 import classNames from 'classnames'
 
-import { cssUrl, cssVar, px } from '~/src/utils/style'
+import { colorTokenCssVar, cssUrl, px } from '~/src/utils/style'
 
 import { FeatureType, useFeatureFlag } from '~/src/components/FeatureProvider'
 
@@ -57,14 +57,17 @@ export const SmoothCornersBox = forwardRef<
           '--b-smooth-corners-box-shadow-offset-y': px(shadow?.offsetY),
           '--b-smooth-corners-box-shadow-blur-radius': `${shadowBlurRadius}px`,
           '--b-smooth-corners-box-shadow-spread-radius': `${shadowSpreadRadius}px`,
-          '--b-smooth-corners-box-shadow-color': cssVar(shadow?.color),
+          '--b-smooth-corners-box-shadow-color': colorTokenCssVar(
+            shadow?.color
+          ),
           /**
            * NOTE: Calculate in javascript because it cannot access calculated values via CSS calc() in the paint worklet.
            * @see {@link ~/src/features/SmoothCorners/smoothCornersScript.ts}
            */
           '--b-smooth-corners-box-padding': `${Math.max(shadowBlurRadius, shadowSpreadRadius) * 2}px`,
           '--b-smooth-corners-box-margin': `${margin ?? 0}px`,
-          '--b-smooth-corners-box-background-color': cssVar(backgroundColor),
+          '--b-smooth-corners-box-background-color':
+            colorTokenCssVar(backgroundColor),
           '--b-smooth-corners-box-background-image': cssUrl(backgroundImage),
         } as React.CSSProperties
       }
diff --git a/packages/bezier-react/src/components/Spinner/Spinner.tsx b/packages/bezier-react/src/components/Spinner/Spinner.tsx
index 3213158b19..8de510860b 100644
--- a/packages/bezier-react/src/components/Spinner/Spinner.tsx
+++ b/packages/bezier-react/src/components/Spinner/Spinner.tsx
@@ -5,7 +5,7 @@ import * as React from 'react'
 
 import classNames from 'classnames'
 
-import { cssVar } from '~/src/utils/style'
+import { colorTokenCssVar } from '~/src/utils/style'
 
 import { type SpinnerProps } from './Spinner.types'
 
@@ -24,7 +24,7 @@ export const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(
         ref={forwardedRef}
         style={
           {
-            '--b-spinner-color': cssVar(color),
+            '--b-spinner-color': colorTokenCssVar(color),
             ...style,
           } as React.CSSProperties
         }
diff --git a/packages/bezier-react/src/components/Status/Status.tsx b/packages/bezier-react/src/components/Status/Status.tsx
index 302324bac5..997608c666 100644
--- a/packages/bezier-react/src/components/Status/Status.tsx
+++ b/packages/bezier-react/src/components/Status/Status.tsx
@@ -6,7 +6,7 @@ import { LockIcon, MoonFilledIcon } from '@channel.io/bezier-icons'
 import classNames from 'classnames'
 
 import { type SemanticColor } from '~/src/types/tokens'
-import { cssVar } from '~/src/utils/style'
+import { colorTokenCssVar } from '~/src/utils/style'
 
 import { Icon } from '~/src/components/Icon'
 
@@ -44,7 +44,7 @@ export const Status = memo(
         ref={forwardedRef}
         style={
           {
-            '--b-status-bg-color': cssVar(backgroundColor),
+            '--b-status-bg-color': colorTokenCssVar(backgroundColor),
             ...style,
           } as CSSProperties
         }
diff --git a/packages/bezier-react/src/components/Text/Text.tsx b/packages/bezier-react/src/components/Text/Text.tsx
index ea95e71249..cde760932d 100644
--- a/packages/bezier-react/src/components/Text/Text.tsx
+++ b/packages/bezier-react/src/components/Text/Text.tsx
@@ -5,7 +5,7 @@ import { createElement, forwardRef } from 'react'
 import classNames from 'classnames'
 
 import { getMarginStyles, splitByMarginProps } from '~/src/types/props-helpers'
-import { tokenCssVar } from '~/src/utils/style'
+import { colorTokenCssVar } from '~/src/utils/style'
 import { isNumber } from '~/src/utils/type'
 
 import { type TextProps } from './Text.types'
@@ -50,7 +50,7 @@ export const Text = forwardRef<HTMLElement, TextProps>(
       {
         ref: forwardedRef,
         style: {
-          '--b-text-color': tokenCssVar(color),
+          '--b-text-color': colorTokenCssVar(color),
           '--b-text-line-clamp': isMultiLineTruncated ? truncated : undefined,
           ...marginStyles.style,
           ...style,
diff --git a/packages/bezier-react/src/stories/alpha-color.mdx b/packages/bezier-react/src/stories/alpha-color.mdx
index 6a6eeedfa8..b7b07c970d 100644
--- a/packages/bezier-react/src/stories/alpha-color.mdx
+++ b/packages/bezier-react/src/stories/alpha-color.mdx
@@ -38,7 +38,7 @@ return (
   <VStack
     style={{
       flex: 1,
-      color: 'var(--alpha-color-fg-black-darkest)',
+      color: 'var(--alpha-fg-black-darkest)',
     }}
     spacing={4}
     justify="center"
@@ -51,7 +51,7 @@ return (
         gap: 3,
         fontSize: 9,
         lineHeight: 1,
-        color: 'var(--alpha-color-fg-black-dark)',
+        color: 'var(--alpha-fg-black-dark)',
       }}
     >
       {isHoveredColor ? '' : reference ? 'var' : ''}
@@ -61,9 +61,9 @@ return (
           fontSize: 'inherit',
           lineHeight: 'inherit',
           padding: '1px 2px',
-          backgroundColor: 'var(--alpha-color-bg-grey-lighter)',
+          backgroundColor: 'var(--alpha-bg-grey-lighter)',
           borderRadius: 3,
-          border: '1px solid var(--alpha-color-bg-black-lightest)',
+          border: '1px solid var(--alpha-bg-black-lightest)',
         }}
       >
         {isHoveredColor ? value : reference ? reference : value}
@@ -75,7 +75,7 @@ return (
 
 export const Primary = () => (
   <HStack>
-    <VStack style={{ flex: 1, backgroundColor: 'var(--alpha-color-surface-normal)' }} padding={0}>
+    <VStack style={{ flex: 1, backgroundColor: 'var(--alpha-surface-normal)' }} padding={0}>
       {Object.entries(tokens.global.color).map(([key, { value, ref }]) => (
         <Color
           key={key}
@@ -87,7 +87,7 @@ export const Primary = () => (
     </VStack>
 
     <LightThemeProvider>
-      <VStack style={{ flex: 1, backgroundColor: 'var(--alpha-color-surface-normal)' }} padding={0}>
+      <VStack style={{ flex: 1, backgroundColor: 'var(--alpha-surface-normal)' }} padding={0}>
         {Object.entries(tokens.lightTheme.color).map(([key, { value, ref }]) => (
           <Color
             key={key}
@@ -100,7 +100,7 @@ export const Primary = () => (
     </LightThemeProvider>
 
     <DarkThemeProvider>
-      <VStack style={{ flex: 1, backgroundColor: 'var(--alpha-color-surface-normal)' }} padding={0}>
+      <VStack style={{ flex: 1, backgroundColor: 'var(--alpha-surface-normal)' }} padding={0}>
         {Object.entries(tokens.darkTheme.color).map(([key, { value, ref }]) => (
           <Color
             key={key}
diff --git a/packages/bezier-react/src/stories/alpha-shadow.mdx b/packages/bezier-react/src/stories/alpha-shadow.mdx
index 6c9d654b25..942c75cad8 100644
--- a/packages/bezier-react/src/stories/alpha-shadow.mdx
+++ b/packages/bezier-react/src/stories/alpha-shadow.mdx
@@ -16,14 +16,14 @@ export const Shadow = ({ name, value, reference }) => {
         style={{
           flex: 1,
           boxShadow: value,
-          backgroundColor: 'var(--alpha-color-surface-normal)',
+          backgroundColor: 'var(--alpha-surface-normal)',
           height: 60,
         }}
       />
       <VStack
         style={{
           flex: 1,
-          color: 'var(--alpha-color-fg-black-darkest)',
+          color: 'var(--alpha-fg-black-darkest)',
         }}
         spacing={4}
         justify="center"
@@ -36,7 +36,7 @@ export const Shadow = ({ name, value, reference }) => {
             gap: 3,
             fontSize: 9,
             lineHeight: 1,
-            color: 'var(--alpha-color-fg-black-dark)',
+            color: 'var(--alpha-fg-black-dark)',
           }}
         >
           {reference ? 'var' : ''}
@@ -46,9 +46,9 @@ export const Shadow = ({ name, value, reference }) => {
               fontSize: 'inherit',
               lineHeight: 'inherit',
               padding: '1px 2px',
-              backgroundColor: 'var(--alpha-color-bg-grey-lighter)',
+              backgroundColor: 'var(--alpha-bg-grey-lighter)',
               borderRadius: 3,
-              border: '1px solid var(--alpha-color-bg-black-lightest)',
+              border: '1px solid var(--alpha-bg-black-lightest)',
             }}
           >
             {reference ? reference : value}
@@ -63,7 +63,7 @@ export const Primary = () => (
   <HStack>
 
     <LightThemeProvider>
-      <VStack style={{ flex: 1, backgroundColor: 'var(--alpha-color-surface-normal)' }} padding={40}>
+      <VStack style={{ flex: 1, backgroundColor: 'var(--alpha-surface-normal)' }} padding={40}>
         <VStack spacing={40}>
           {Object.entries(tokens.lightTheme.shadow).map(([key, { value, ref }]) => (
             <Shadow
@@ -78,7 +78,7 @@ export const Primary = () => (
     </LightThemeProvider>
 
     <DarkThemeProvider>
-      <VStack style={{ flex: 1, backgroundColor: 'var(--alpha-color-surface-normal)' }} padding={40}>
+      <VStack style={{ flex: 1, backgroundColor: 'var(--alpha-surface-normal)' }} padding={40}>
         <VStack spacing={40}>
           {Object.entries(tokens.darkTheme.shadow).map(([key, { value, ref }]) => (
             <Shadow
diff --git a/packages/bezier-react/src/styles/_alpha-tokens.scss b/packages/bezier-react/src/styles/_alpha-tokens.scss
deleted file mode 100644
index d9ad0aa838..0000000000
--- a/packages/bezier-react/src/styles/_alpha-tokens.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@use '../../node_modules/@channel.io/bezier-tokens/dist/alpha/css/styles.css'
-  as *;
diff --git a/packages/bezier-react/src/styles/_tokens.scss b/packages/bezier-react/src/styles/_tokens.scss
index c73835b501..1604a52584 100644
--- a/packages/bezier-react/src/styles/_tokens.scss
+++ b/packages/bezier-react/src/styles/_tokens.scss
@@ -1 +1,3 @@
 @use '../../node_modules/@channel.io/bezier-tokens/dist/css/styles.css' as *;
+@use '../../node_modules/@channel.io/bezier-tokens/dist/alpha/css/styles.css'
+  as *;
diff --git a/packages/bezier-react/src/styles/index.scss b/packages/bezier-react/src/styles/index.scss
index 6f0927e21e..81fa6cfc0e 100644
--- a/packages/bezier-react/src/styles/index.scss
+++ b/packages/bezier-react/src/styles/index.scss
@@ -1,15 +1,11 @@
 @use 'sass:meta';
 
-@layer tokens, alpha-tokens, base, components;
+@layer tokens, base, components;
 
 @layer tokens {
   @include meta.load-css('tokens');
 }
 
-@layer alpha-tokens {
-  @include meta.load-css('alpha-tokens');
-}
-
 @layer base {
   @include meta.load-css('base');
 }
diff --git a/packages/bezier-react/src/types/alpha-tokens.ts b/packages/bezier-react/src/types/alpha-tokens.ts
index 8d842c5767..3f22b57f95 100644
--- a/packages/bezier-react/src/types/alpha-tokens.ts
+++ b/packages/bezier-react/src/types/alpha-tokens.ts
@@ -15,18 +15,22 @@ export type GlobalToken = typeof tokens.global
  */
 export type SemanticToken = typeof tokens.lightTheme | typeof tokens.darkTheme
 
+// NOTE: (@ed) Do not remove alpha- prefix to match CSS variable names
 export type FlattenGlobalToken = ExtractKeys<GlobalToken[keyof GlobalToken]>
 export type FlattenSemanticToken = ExtractKeys<
   SemanticToken[keyof SemanticToken]
 >
 export type FlattenAllToken = FlattenGlobalToken | FlattenSemanticToken
 
-export type GlobalColor = keyof GlobalToken['color']
+export type GlobalColor = RemovePrefix<'alpha', keyof GlobalToken['color']>
 
 /**
  * Functional & Semantic color tokens
  */
-export type BaseSemanticColor = keyof SemanticToken['color']
+export type BaseSemanticColor = RemovePrefix<
+  'alpha',
+  keyof SemanticToken['color']
+>
 
 export type BackgroundFunctionalColor = StartsWithPrefix<
   'bg',
@@ -60,20 +64,23 @@ export type SemanticColor = StartsWithPrefix<
 
 export type Color = GlobalColor | FunctionalColor | SemanticColor
 
-export type Radius = RemovePrefix<'radius', keyof GlobalToken['radius']>
-export type Opacity = RemovePrefix<'opacity', keyof GlobalToken['opacity']>
-export type Font = RemovePrefix<'font', keyof GlobalToken['font']>
+export type Radius = RemovePrefix<'alpha-radius', keyof GlobalToken['radius']>
+export type Opacity = RemovePrefix<
+  'alpha-opacity',
+  keyof GlobalToken['opacity']
+>
+export type Font = RemovePrefix<'alpha-font', keyof GlobalToken['font']>
 export type Typography = RemovePrefix<
-  'typography',
+  'alpha-typography',
   keyof GlobalToken['typography']
 >
 export type GlobalGradient = RemovePrefix<
-  'gradient',
+  'alpha-gradient',
   keyof GlobalToken['gradient']
 >
 
-export type Shadow = RemovePrefix<'shadow', keyof SemanticToken['shadow']>
+export type Shadow = RemovePrefix<'alpha-shadow', keyof SemanticToken['shadow']>
 export type FunctionalGradient = RemovePrefix<
-  'gradient',
+  'alpha-gradient',
   keyof SemanticToken['gradient']
 >
diff --git a/packages/bezier-react/src/types/props-helpers.ts b/packages/bezier-react/src/types/props-helpers.ts
index 84f168c356..04df72b269 100644
--- a/packages/bezier-react/src/types/props-helpers.ts
+++ b/packages/bezier-react/src/types/props-helpers.ts
@@ -6,7 +6,7 @@ import {
   type MarginProps,
 } from '~/src/types/props'
 import { type Elevation, type Radius, type ZIndex } from '~/src/types/tokens'
-import { cssDimension, tokenCssVar } from '~/src/utils/style'
+import { colorTokenCssVar, cssDimension } from '~/src/utils/style'
 
 // NOTE: 'typescript-plugin-css-modules' does not support path alias
 /* eslint-disable no-restricted-imports */
@@ -210,8 +210,8 @@ export const getLayoutStyles = ({
     '--b-basis': cssDimension(basis),
     '--b-shrink': shrink,
     '--b-grow': grow,
-    '--b-background-color': tokenCssVar(backgroundColor),
-    '--b-border-color': tokenCssVar(borderColor),
+    '--b-background-color': colorTokenCssVar(backgroundColor),
+    '--b-border-color': colorTokenCssVar(borderColor),
     '--b-border-width': cssDimension(borderWidth),
     '--b-border-top-width': cssDimension(borderTopWidth),
     '--b-border-right-width': cssDimension(borderRightWidth),
diff --git a/packages/bezier-react/src/utils/style.ts b/packages/bezier-react/src/utils/style.ts
index 705e0f367c..ef840bb0df 100644
--- a/packages/bezier-react/src/utils/style.ts
+++ b/packages/bezier-react/src/utils/style.ts
@@ -1,4 +1,5 @@
-import { type FlattenAllToken } from '~/src/types/tokens'
+import type * as AlphaTokens from '~/src/types/alpha-tokens'
+import { type FlattenAllToken, type SemanticColor } from '~/src/types/tokens'
 import { isNil, isString } from '~/src/utils/type'
 
 /**
@@ -38,21 +39,138 @@ export function cssDimension<Value extends number | string>(value?: Value) {
 export function cssVar<PropertyName extends string | undefined>(
   propertyName: PropertyName
 ) {
-  /* eslint-disable no-nested-ternary */
   return !isNil(propertyName) ? (`var(--${propertyName})` as const) : undefined
-  /* eslint-enable no-nested-ternary */
 }
 
 /**
  * Wrapper function for `cssVar` to handle tokens specifically.
  * It generates a CSS variable string for a given design token.
  */
-export function tokenCssVar<PropertyName extends FlattenAllToken | undefined>(
+export const tokenCssVar = cssVar as <
+  PropertyName extends FlattenAllToken | undefined,
+>(
   propertyName: PropertyName
+) => ReturnType<typeof cssVar<PropertyName>>
+
+/**
+ * NOTE: (@ed) Converts a legacy color token to alpha color token.
+ * **Should be removed after the migration is complete.**
+ */
+function alphaColorTokenCssVar<
+  PropertyName extends
+    | AlphaTokens.FunctionalColor
+    | AlphaTokens.SemanticColor
+    | undefined,
+>(propertyName: PropertyName) {
+  return !isNil(propertyName)
+    ? (`var(--alpha-${propertyName})` as const)
+    : undefined
+}
+
+/**
+ * NOTE: (@ed) Converts a legacy color token to alpha color token.
+ * **Should be removed after the migration is complete.**
+ */
+export function colorTokenCssVar<ColorToken extends SemanticColor | undefined>(
+  colorToken: ColorToken
 ) {
-  return cssVar(propertyName)
+  return alphaColorTokenCssVar(
+    legacyToAlphaColorTokenMap[
+      colorToken as keyof typeof legacyToAlphaColorTokenMap
+    ] ?? colorToken
+  )
 }
 
+export const legacyToAlphaColorTokenMap = Object.freeze({
+  'txt-black-darkest': 'fg-black-darkest',
+  'txt-black-darker': 'fg-black-darker',
+  'txt-black-dark': 'fg-black-dark',
+  'txt-black-pure': 'fg-black-pure',
+  'txt-white-normal': 'fg-white-normal',
+  'bg-header': 'bg-white-higher',
+  'bg-header-float': 'bg-white-alpha-lightest',
+  'bg-navi': 'bg-grey-alpha-dark',
+  'bg-gnb': 'bg-grey-alpha-darkest',
+  'bg-lounge': 'bg-grey-alpha-darker',
+  'bg-grey-dim-lightest': 'bg-grey-alpha-light',
+  'bg-white-high': 'bg-white-highest',
+  'bg-white-low': 'bg-white-higher',
+  'bg-white-dim-light': 'bg-white-alpha-light',
+  'bg-white-dim-dark': 'bg-white-alpha-lighter',
+  'bgtxt-blue-normal': 'bg-blue-normal',
+  'bgtxt-blue-light': 'bg-blue-light',
+  'bgtxt-blue-lighter': 'bg-blue-lighter',
+  'bgtxt-blue-lightest': 'bg-blue-lightest',
+  'bgtxt-blue-dark': 'bg-blue-dark',
+  'bgtxt-cobalt-normal': 'bg-cobalt-normal',
+  'bgtxt-cobalt-light': 'bg-cobalt-light',
+  'bgtxt-cobalt-lighter': 'bg-cobalt-lighter',
+  'bgtxt-cobalt-lightest': 'bg-cobalt-lightest',
+  'bgtxt-cobalt-dark': 'bg-cobalt-dark',
+  'bgtxt-red-normal': 'bg-red-normal',
+  'bgtxt-red-light': 'bg-red-light',
+  'bgtxt-red-lighter': 'bg-red-lighter',
+  'bgtxt-red-lightest': 'bg-red-lightest',
+  'bgtxt-red-dark': 'bg-red-dark',
+  'bgtxt-orange-normal': 'bg-orange-normal',
+  'bgtxt-orange-light': 'bg-orange-light',
+  'bgtxt-orange-lighter': 'bg-orange-lighter',
+  'bgtxt-orange-lightest': 'bg-orange-lightest',
+  'bgtxt-orange-dark': 'bg-orange-dark',
+  'bgtxt-green-normal': 'bg-green-normal',
+  'bgtxt-green-light': 'bg-green-light',
+  'bgtxt-green-lighter': 'bg-green-lighter',
+  'bgtxt-green-lightest': 'bg-green-lightest',
+  'bgtxt-green-dark': 'bg-green-dark',
+  'bgtxt-teal-normal': 'bg-teal-normal',
+  'bgtxt-teal-light': 'bg-teal-light',
+  'bgtxt-teal-lighter': 'bg-teal-lighter',
+  'bgtxt-teal-lightest': 'bg-teal-lightest',
+  'bgtxt-teal-dark': 'bg-teal-dark',
+  'bgtxt-olive-normal': 'bg-olive-normal',
+  'bgtxt-olive-light': 'bg-olive-light',
+  'bgtxt-olive-lighter': 'bg-olive-lighter',
+  'bgtxt-olive-lightest': 'bg-olive-lightest',
+  'bgtxt-olive-dark': 'bg-olive-dark',
+  'bgtxt-yellow-normal': 'bg-yellow-normal',
+  'bgtxt-yellow-light': 'bg-yellow-light',
+  'bgtxt-yellow-lighter': 'bg-yellow-lighter',
+  'bgtxt-yellow-lightest': 'bg-yellow-lightest',
+  'bgtxt-yellow-dark': 'bg-yellow-dark',
+  'bgtxt-pink-normal': 'bg-pink-normal',
+  'bgtxt-pink-light': 'bg-pink-light',
+  'bgtxt-pink-lighter': 'bg-pink-lighter',
+  'bgtxt-pink-lightest': 'bg-pink-lightest',
+  'bgtxt-pink-dark': 'bg-pink-dark',
+  'bgtxt-purple-normal': 'bg-purple-normal',
+  'bgtxt-purple-light': 'bg-purple-light',
+  'bgtxt-purple-lighter': 'bg-purple-lighter',
+  'bgtxt-purple-lightest': 'bg-purple-lightest',
+  'bgtxt-purple-dark': 'bg-purple-dark',
+  'bgtxt-navy-normal': 'bg-navy-normal',
+  'bgtxt-navy-light': 'bg-navy-light',
+  'bgtxt-navy-lighter': 'bg-navy-lighter',
+  'bgtxt-navy-lightest': 'bg-navy-lightest',
+  'bgtxt-navy-dark': 'bg-navy-dark',
+  'bgtxt-absolute-black-dark': 'bg-absolute-black-dark',
+  'bgtxt-absolute-black-normal': 'bg-absolute-black-normal',
+  'bgtxt-absolute-black-light': 'bg-absolute-black-light',
+  'bgtxt-absolute-black-lighter': 'bg-absolute-black-lighter',
+  'bgtxt-absolute-black-lightest': 'bg-absolute-black-lightest',
+  'bgtxt-absolute-white-dark': 'bg-absolute-white-dark',
+  'bgtxt-absolute-white-normal': 'bg-absolute-white-normal',
+  'bgtxt-absolute-white-light': 'bg-absolute-white-light',
+  'bgtxt-absolute-white-lighter': 'bg-absolute-white-lighter',
+  'bgtxt-absolute-white-lightest': 'bg-absolute-white-lightest',
+  'bdr-black-lightest': 'bg-black-lightest',
+  'bdr-black-light': 'bg-black-light',
+  'bdr-grey-light': 'bg-grey-light',
+  'bdr-white': 'bg-white-highest',
+  'bdr-black-dark': 'bg-black-dark',
+}) satisfies Partial<
+  Record<SemanticColor, AlphaTokens.FunctionalColor | AlphaTokens.SemanticColor>
+>
+
 /**
  * Formats a given URL string into a CSS `url()` function format.
  */
diff --git a/packages/bezier-tokens/scripts/lib/transform.ts b/packages/bezier-tokens/scripts/lib/transform.ts
index 57d9472b86..f33d7c9fe1 100644
--- a/packages/bezier-tokens/scripts/lib/transform.ts
+++ b/packages/bezier-tokens/scripts/lib/transform.ts
@@ -6,6 +6,12 @@ type CustomTransform = Named<Transform<unknown>>
 type Transforms = Record<string, CustomTransform>
 
 export const CSSTransforms = {
+  alphaNamespace: {
+    name: 'custom/alpha/namespace',
+    type: 'name',
+    matcher: (token) => token.filePath.startsWith('src/alpha'),
+    transformer: ({ name }) => `alpha-${name}`,
+  },
   fontRem: {
     name: 'custom/css/font/rem',
     type: 'value',