From 728f3ce21a2480aa128b20c8b99b7364b90df4a3 Mon Sep 17 00:00:00 2001
From: Ed Sungik Choi <sungik.dev@gmail.com>
Date: Tue, 7 Jan 2025 13:40:38 +0900
Subject: [PATCH 1/9] feat(bezier-tokens): remove color category prefix from
 alpha color tokens

---
 .../alpha/functional/dark-theme/color.json    | 1538 +++++++------
 .../src/alpha/functional/gradient.json        |    4 +-
 .../alpha/functional/light-theme/color.json   | 1538 +++++++------
 .../src/alpha/functional/shadow.json          |   36 +-
 .../bezier-tokens/src/alpha/global/color.json | 2046 ++++++++---------
 .../src/alpha/global/gradient.json            |   20 +-
 .../src/alpha/semantic/color.json             |  360 ++-
 .../src/alpha/semantic/shadow.json            |   24 +-
 8 files changed, 2779 insertions(+), 2787 deletions(-)

diff --git a/packages/bezier-tokens/src/alpha/functional/dark-theme/color.json b/packages/bezier-tokens/src/alpha/functional/dark-theme/color.json
index aa77ec1ccd..3244df81a8 100644
--- a/packages/bezier-tokens/src/alpha/functional/dark-theme/color.json
+++ b/packages/bezier-tokens/src/alpha/functional/dark-theme/color.json
@@ -1,874 +1,872 @@
 {
-  "color": {
-    "fg": {
-      "black": {
-        "pure": {
-          "value": "{color.white.100}",
-          "type": "color"
-        },
-        "darkest": {
-          "value": "{color.white.80}",
-          "type": "color"
-        },
-        "darker": {
-          "value": "{color.white.60}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.white.40}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.white.20}",
-          "type": "color"
-        },
-        "lightest": {
-          "value": "{color.white.12}",
-          "type": "color"
-        }
+  "fg": {
+    "black": {
+      "pure": {
+        "value": "{white.100}",
+        "type": "color"
       },
-      "white": {
-        "normal": {
-          "value": "{color.grey.900}",
-          "type": "color"
-        }
+      "darkest": {
+        "value": "{white.80}",
+        "type": "color"
       },
-      "blue": {
-        "normal": {
-          "value": "{color.blue.300}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.blue.300-45}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.blue.300}",
-          "type": "color"
-        }
+      "darker": {
+        "value": "{white.60}",
+        "type": "color"
       },
-      "cobalt": {
-        "normal": {
-          "value": "{color.cobalt.300}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.cobalt.300-45}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.cobalt.300}",
-          "type": "color"
-        }
+      "dark": {
+        "value": "{white.40}",
+        "type": "color"
       },
-      "red": {
-        "normal": {
-          "value": "{color.red.300}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.red.300-45}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.red.300}",
-          "type": "color"
-        }
+      "light": {
+        "value": "{white.20}",
+        "type": "color"
       },
-      "orange": {
-        "normal": {
-          "value": "{color.orange.300}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.orange.300-45}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.orange.300}",
-          "type": "color"
-        }
+      "lightest": {
+        "value": "{white.12}",
+        "type": "color"
+      }
+    },
+    "white": {
+      "normal": {
+        "value": "{grey.900}",
+        "type": "color"
+      }
+    },
+    "blue": {
+      "normal": {
+        "value": "{blue.300}",
+        "type": "color"
       },
-      "green": {
-        "normal": {
-          "value": "{color.green.300}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.green.300-45}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.green.300}",
-          "type": "color"
-        }
+      "light": {
+        "value": "{blue.300-45}",
+        "type": "color"
       },
-      "teal": {
-        "normal": {
-          "value": "{color.teal.300}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.teal.300-45}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.teal.300}",
-          "type": "color"
-        }
+      "dark": {
+        "value": "{blue.300}",
+        "type": "color"
+      }
+    },
+    "cobalt": {
+      "normal": {
+        "value": "{cobalt.300}",
+        "type": "color"
       },
-      "olive": {
-        "normal": {
-          "value": "{color.olive.300}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.olive.300-45}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.olive.300}",
-          "type": "color"
-        }
+      "light": {
+        "value": "{cobalt.300-45}",
+        "type": "color"
       },
-      "yellow": {
-        "normal": {
-          "value": "{color.yellow.300}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.yellow.300-45}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.yellow.300}",
-          "type": "color"
-        }
+      "dark": {
+        "value": "{cobalt.300}",
+        "type": "color"
+      }
+    },
+    "red": {
+      "normal": {
+        "value": "{red.300}",
+        "type": "color"
       },
-      "pink": {
-        "normal": {
-          "value": "{color.pink.300}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.pink.300-45}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.pink.300}",
-          "type": "color"
-        }
+      "light": {
+        "value": "{red.300-45}",
+        "type": "color"
       },
-      "purple": {
-        "normal": {
-          "value": "{color.purple.300}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.purple.300-45}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.purple.300}",
-          "type": "color"
-        }
+      "dark": {
+        "value": "{red.300}",
+        "type": "color"
+      }
+    },
+    "orange": {
+      "normal": {
+        "value": "{orange.300}",
+        "type": "color"
       },
-      "navy": {
-        "normal": {
-          "value": "{color.navy.300}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.navy.300-45}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.navy.300}",
-          "type": "color"
-        }
+      "light": {
+        "value": "{orange.300-45}",
+        "type": "color"
       },
-      "absolute": {
-        "black": {
-          "dark": {
-            "value": "{color.black.100}",
-            "type": "color"
-          },
-          "normal": {
-            "value": "{color.black.85}",
-            "type": "color"
-          },
-          "light": {
-            "value": "{color.black.60}",
-            "type": "color"
-          },
-          "lighter": {
-            "value": "{color.black.40}",
-            "type": "color"
-          },
-          "lightest": {
-            "value": "{color.black.20}",
-            "type": "color"
-          }
-        },
-        "white": {
-          "dark": {
-            "value": "{color.white.100}",
-            "type": "color"
-          },
-          "normal": {
-            "value": "{color.white.90}",
-            "type": "color"
-          },
-          "light": {
-            "value": "{color.white.60}",
-            "type": "color"
-          },
-          "lighter": {
-            "value": "{color.white.40}",
-            "type": "color"
-          },
-          "lightest": {
-            "value": "{color.white.20}",
-            "type": "color"
-          }
-        }
+      "dark": {
+        "value": "{orange.300}",
+        "type": "color"
+      }
+    },
+    "green": {
+      "normal": {
+        "value": "{green.300}",
+        "type": "color"
       },
-      "grey": {
-        "darkest": {
-          "value": "{color.white.100}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.grey.500}",
-          "type": "color"
-        },
-        "normal": {
-          "value": "{color.grey.600}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.grey.700}",
-          "type": "color"
-        },
-        "lighter": {
-          "value": "{color.grey.800}",
-          "type": "color"
-        },
-        "lightest": {
-          "value": "{color.grey.850}",
-          "type": "color"
-        }
+      "light": {
+        "value": "{green.300-45}",
+        "type": "color"
       },
-      "grey-alpha": {
-        "darker": {
-          "value": "{color.grey-alpha.800-90}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.grey-alpha.800-80}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.grey-alpha.850-80}",
-          "type": "color"
-        }
+      "dark": {
+        "value": "{green.300}",
+        "type": "color"
+      }
+    },
+    "teal": {
+      "normal": {
+        "value": "{teal.300}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{teal.300-45}",
+        "type": "color"
+      },
+      "dark": {
+        "value": "{teal.300}",
+        "type": "color"
+      }
+    },
+    "olive": {
+      "normal": {
+        "value": "{olive.300}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{olive.300-45}",
+        "type": "color"
+      },
+      "dark": {
+        "value": "{olive.300}",
+        "type": "color"
+      }
+    },
+    "yellow": {
+      "normal": {
+        "value": "{yellow.300}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{yellow.300-45}",
+        "type": "color"
+      },
+      "dark": {
+        "value": "{yellow.300}",
+        "type": "color"
+      }
+    },
+    "pink": {
+      "normal": {
+        "value": "{pink.300}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{pink.300-45}",
+        "type": "color"
+      },
+      "dark": {
+        "value": "{pink.300}",
+        "type": "color"
+      }
+    },
+    "purple": {
+      "normal": {
+        "value": "{purple.300}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{purple.300-45}",
+        "type": "color"
+      },
+      "dark": {
+        "value": "{purple.300}",
+        "type": "color"
+      }
+    },
+    "navy": {
+      "normal": {
+        "value": "{navy.300}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{navy.300-45}",
+        "type": "color"
+      },
+      "dark": {
+        "value": "{navy.300}",
+        "type": "color"
       }
     },
-    "bg": {
+    "absolute": {
       "black": {
-        "darkest": {
-          "value": "{color.black.60}",
-          "type": "color"
-        },
-        "darker": {
-          "value": "{color.white.40}",
+        "dark": {
+          "value": "{black.100}",
           "type": "color"
         },
-        "dark": {
-          "value": "{color.white.20}",
+        "normal": {
+          "value": "{black.85}",
           "type": "color"
         },
         "light": {
-          "value": "{color.white.12}",
+          "value": "{black.60}",
           "type": "color"
         },
         "lighter": {
-          "value": "{color.white.8}",
+          "value": "{black.40}",
           "type": "color"
         },
         "lightest": {
-          "value": "{color.white.5}",
-          "type": "color"
-        },
-        "transparent": {
-          "value": "{color.white.0}",
+          "value": "{black.20}",
           "type": "color"
         }
       },
-      "grey": {
-        "darkest": {
-          "value": "{color.white.100}",
+      "white": {
+        "dark": {
+          "value": "{white.100}",
           "type": "color"
         },
-        "dark": {
-          "value": "{color.grey.500}",
+        "normal": {
+          "value": "{white.90}",
           "type": "color"
         },
         "light": {
-          "value": "{color.grey.700}",
+          "value": "{white.60}",
           "type": "color"
         },
         "lighter": {
-          "value": "{color.grey.800}",
+          "value": "{white.40}",
           "type": "color"
         },
         "lightest": {
-          "value": "{color.grey.850}",
-          "type": "color"
-        },
-        "transparent": {
-          "value": "{color.white.0}",
-          "type": "color"
-        },
-        "normal": {
-          "value": "{color.grey.600}",
+          "value": "{white.20}",
           "type": "color"
         }
+      }
+    },
+    "grey": {
+      "darkest": {
+        "value": "{white.100}",
+        "type": "color"
       },
-      "grey-alpha": {
-        "darkest": {
-          "value": "{color.grey-alpha.700-80}",
-          "type": "color"
-        },
-        "darker": {
-          "value": "{color.grey-alpha.800-90}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.grey-alpha.800-80}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.grey-alpha.850-80}",
-          "type": "color"
-        }
+      "dark": {
+        "value": "{grey.500}",
+        "type": "color"
       },
-      "white": {
-        "highest": {
-          "value": "{color.grey.700}",
-          "type": "color"
-        },
-        "higher": {
-          "value": "{color.grey.800}",
-          "type": "color"
-        },
-        "normal": {
-          "value": "{color.grey.900}",
-          "type": "color"
-        },
-        "transparent": {
-          "value": "{color.white.0}",
-          "type": "color"
-        }
+      "normal": {
+        "value": "{grey.600}",
+        "type": "color"
       },
-      "white-alpha": {
-        "lightest": {
-          "value": "{color.grey-alpha.800-80}",
-          "type": "color"
-        },
-        "lighter": {
-          "value": "{color.black.60}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.black.20}",
-          "type": "color"
-        },
-        "transparent": {
-          "value": "{color.black.0}",
-          "type": "color"
-        }
+      "light": {
+        "value": "{grey.700}",
+        "type": "color"
       },
-      "blue": {
-        "normal": {
-          "value": "{color.blue.300}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.blue.300-45}",
-          "type": "color"
-        },
-        "lighter": {
-          "value": "{color.blue.300-30}",
-          "type": "color"
-        },
-        "lightest": {
-          "value": "{color.blue.300-15}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.blue.400}",
-          "type": "color"
-        },
-        "shade-lighter": {
-          "value": "{color.shade-blue.600-40}",
-          "type": "color"
-        },
-        "shade-normal": {
-          "value": "{color.shade-blue.600}",
-          "type": "color"
-        },
-        "transparent": {
-          "value": "{color.blue.300-0}",
-          "type": "color"
-        }
+      "lighter": {
+        "value": "{grey.800}",
+        "type": "color"
+      },
+      "lightest": {
+        "value": "{grey.850}",
+        "type": "color"
+      }
+    },
+    "grey-alpha": {
+      "darker": {
+        "value": "{grey-alpha.800-90}",
+        "type": "color"
+      },
+      "dark": {
+        "value": "{grey-alpha.800-80}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{grey-alpha.850-80}",
+        "type": "color"
+      }
+    }
+  },
+  "bg": {
+    "black": {
+      "darkest": {
+        "value": "{black.60}",
+        "type": "color"
+      },
+      "darker": {
+        "value": "{white.40}",
+        "type": "color"
+      },
+      "dark": {
+        "value": "{white.20}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{white.12}",
+        "type": "color"
+      },
+      "lighter": {
+        "value": "{white.8}",
+        "type": "color"
+      },
+      "lightest": {
+        "value": "{white.5}",
+        "type": "color"
+      },
+      "transparent": {
+        "value": "{white.0}",
+        "type": "color"
+      }
+    },
+    "grey": {
+      "darkest": {
+        "value": "{white.100}",
+        "type": "color"
+      },
+      "dark": {
+        "value": "{grey.500}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{grey.700}",
+        "type": "color"
+      },
+      "lighter": {
+        "value": "{grey.800}",
+        "type": "color"
+      },
+      "lightest": {
+        "value": "{grey.850}",
+        "type": "color"
+      },
+      "transparent": {
+        "value": "{white.0}",
+        "type": "color"
+      },
+      "normal": {
+        "value": "{grey.600}",
+        "type": "color"
+      }
+    },
+    "grey-alpha": {
+      "darkest": {
+        "value": "{grey-alpha.700-80}",
+        "type": "color"
+      },
+      "darker": {
+        "value": "{grey-alpha.800-90}",
+        "type": "color"
+      },
+      "dark": {
+        "value": "{grey-alpha.800-80}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{grey-alpha.850-80}",
+        "type": "color"
+      }
+    },
+    "white": {
+      "highest": {
+        "value": "{grey.700}",
+        "type": "color"
+      },
+      "higher": {
+        "value": "{grey.800}",
+        "type": "color"
+      },
+      "normal": {
+        "value": "{grey.900}",
+        "type": "color"
+      },
+      "transparent": {
+        "value": "{white.0}",
+        "type": "color"
+      }
+    },
+    "white-alpha": {
+      "lightest": {
+        "value": "{grey-alpha.800-80}",
+        "type": "color"
+      },
+      "lighter": {
+        "value": "{black.60}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{black.20}",
+        "type": "color"
+      },
+      "transparent": {
+        "value": "{black.0}",
+        "type": "color"
+      }
+    },
+    "blue": {
+      "normal": {
+        "value": "{blue.300}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{blue.300-45}",
+        "type": "color"
+      },
+      "lighter": {
+        "value": "{blue.300-30}",
+        "type": "color"
+      },
+      "lightest": {
+        "value": "{blue.300-15}",
+        "type": "color"
+      },
+      "dark": {
+        "value": "{blue.400}",
+        "type": "color"
+      },
+      "shade-lighter": {
+        "value": "{shade-blue.600-40}",
+        "type": "color"
+      },
+      "shade-normal": {
+        "value": "{shade-blue.600}",
+        "type": "color"
+      },
+      "transparent": {
+        "value": "{blue.300-0}",
+        "type": "color"
+      }
+    },
+    "cobalt": {
+      "normal": {
+        "value": "{cobalt.300}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{cobalt.300-45}",
+        "type": "color"
+      },
+      "lighter": {
+        "value": "{cobalt.300-30}",
+        "type": "color"
+      },
+      "lightest": {
+        "value": "{cobalt.300-15}",
+        "type": "color"
+      },
+      "dark": {
+        "value": "{cobalt.400}",
+        "type": "color"
+      },
+      "shade-lighter": {
+        "value": "{shade-cobalt.600-40}",
+        "type": "color"
+      },
+      "shade-normal": {
+        "value": "{shade-cobalt.600}",
+        "type": "color"
+      },
+      "transparent": {
+        "value": "{cobalt.300-0}",
+        "type": "color"
+      }
+    },
+    "red": {
+      "normal": {
+        "value": "{red.300}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{red.300-45}",
+        "type": "color"
+      },
+      "lighter": {
+        "value": "{red.300-30}",
+        "type": "color"
+      },
+      "lightest": {
+        "value": "{red.300-15}",
+        "type": "color"
+      },
+      "dark": {
+        "value": "{red.400}",
+        "type": "color"
+      },
+      "shade-lighter": {
+        "value": "{shade-red.600-40}",
+        "type": "color"
+      },
+      "shade-normal": {
+        "value": "{shade-red.600}",
+        "type": "color"
+      },
+      "transparent": {
+        "value": "{red.300-0}",
+        "type": "color"
+      }
+    },
+    "orange": {
+      "normal": {
+        "value": "{orange.300}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{orange.300-45}",
+        "type": "color"
+      },
+      "lighter": {
+        "value": "{orange.300-30}",
+        "type": "color"
+      },
+      "lightest": {
+        "value": "{orange.300-15}",
+        "type": "color"
+      },
+      "dark": {
+        "value": "{orange.400}",
+        "type": "color"
+      },
+      "shade-lighter": {
+        "value": "{shade-orange.600-40}",
+        "type": "color"
+      },
+      "shade-normal": {
+        "value": "{shade-orange.600}",
+        "type": "color"
+      },
+      "transparent": {
+        "value": "{orange.300-0}",
+        "type": "color"
+      }
+    },
+    "green": {
+      "normal": {
+        "value": "{green.300}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{green.300-45}",
+        "type": "color"
+      },
+      "lighter": {
+        "value": "{green.300-30}",
+        "type": "color"
+      },
+      "lightest": {
+        "value": "{green.300-15}",
+        "type": "color"
+      },
+      "dark": {
+        "value": "{green.400}",
+        "type": "color"
+      },
+      "shade-lighter": {
+        "value": "{shade-green.600-40}",
+        "type": "color"
+      },
+      "shade-normal": {
+        "value": "{shade-green.600}",
+        "type": "color"
+      },
+      "transparent": {
+        "value": "{green.300-0}",
+        "type": "color"
+      }
+    },
+    "teal": {
+      "normal": {
+        "value": "{teal.300}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{teal.300-45}",
+        "type": "color"
+      },
+      "lighter": {
+        "value": "{teal.300-30}",
+        "type": "color"
+      },
+      "lightest": {
+        "value": "{teal.300-15}",
+        "type": "color"
+      },
+      "dark": {
+        "value": "{teal.400}",
+        "type": "color"
+      },
+      "shade-lighter": {
+        "value": "{shade-teal.600-40}",
+        "type": "color"
+      },
+      "shade-normal": {
+        "value": "{shade-teal.600}",
+        "type": "color"
+      },
+      "transparent": {
+        "value": "{teal.300-0}",
+        "type": "color"
+      }
+    },
+    "olive": {
+      "normal": {
+        "value": "{olive.300}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{olive.300-45}",
+        "type": "color"
+      },
+      "lighter": {
+        "value": "{olive.300-30}",
+        "type": "color"
+      },
+      "lightest": {
+        "value": "{olive.300-15}",
+        "type": "color"
+      },
+      "dark": {
+        "value": "{olive.400}",
+        "type": "color"
+      },
+      "shade-lighter": {
+        "value": "{shade-olive.600-40}",
+        "type": "color"
+      },
+      "shade-normal": {
+        "value": "{shade-olive.600}",
+        "type": "color"
+      },
+      "transparent": {
+        "value": "{olive.300-0}",
+        "type": "color"
+      }
+    },
+    "yellow": {
+      "normal": {
+        "value": "{yellow.300}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{yellow.300-45}",
+        "type": "color"
+      },
+      "lighter": {
+        "value": "{yellow.300-30}",
+        "type": "color"
+      },
+      "lightest": {
+        "value": "{yellow.300-15}",
+        "type": "color"
+      },
+      "dark": {
+        "value": "{yellow.400}",
+        "type": "color"
+      },
+      "shade-lighter": {
+        "value": "{shade-yellow.600-40}",
+        "type": "color"
+      },
+      "shade-normal": {
+        "value": "{shade-yellow.600}",
+        "type": "color"
+      },
+      "transparent": {
+        "value": "{yellow.300-0}",
+        "type": "color"
+      }
+    },
+    "pink": {
+      "normal": {
+        "value": "{pink.300}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{pink.300-45}",
+        "type": "color"
+      },
+      "lighter": {
+        "value": "{pink.300-30}",
+        "type": "color"
+      },
+      "lightest": {
+        "value": "{pink.300-15}",
+        "type": "color"
+      },
+      "dark": {
+        "value": "{pink.400}",
+        "type": "color"
+      },
+      "shade-lighter": {
+        "value": "{shade-pink.600-40}",
+        "type": "color"
+      },
+      "shade-normal": {
+        "value": "{shade-pink.600}",
+        "type": "color"
+      },
+      "transparent": {
+        "value": "{pink.300-0}",
+        "type": "color"
+      }
+    },
+    "purple": {
+      "normal": {
+        "value": "{purple.300}",
+        "type": "color"
       },
-      "cobalt": {
-        "normal": {
-          "value": "{color.cobalt.300}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.cobalt.300-45}",
-          "type": "color"
-        },
-        "lighter": {
-          "value": "{color.cobalt.300-30}",
-          "type": "color"
-        },
-        "lightest": {
-          "value": "{color.cobalt.300-15}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.cobalt.400}",
-          "type": "color"
-        },
-        "shade-lighter": {
-          "value": "{color.shade-cobalt.600-40}",
-          "type": "color"
-        },
-        "shade-normal": {
-          "value": "{color.shade-cobalt.600}",
-          "type": "color"
-        },
-        "transparent": {
-          "value": "{color.cobalt.300-0}",
-          "type": "color"
-        }
+      "light": {
+        "value": "{purple.300-45}",
+        "type": "color"
       },
-      "red": {
-        "normal": {
-          "value": "{color.red.300}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.red.300-45}",
-          "type": "color"
-        },
-        "lighter": {
-          "value": "{color.red.300-30}",
-          "type": "color"
-        },
-        "lightest": {
-          "value": "{color.red.300-15}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.red.400}",
-          "type": "color"
-        },
-        "shade-lighter": {
-          "value": "{color.shade-red.600-40}",
-          "type": "color"
-        },
-        "shade-normal": {
-          "value": "{color.shade-red.600}",
-          "type": "color"
-        },
-        "transparent": {
-          "value": "{color.red.300-0}",
-          "type": "color"
-        }
+      "lighter": {
+        "value": "{purple.300-30}",
+        "type": "color"
       },
-      "orange": {
-        "normal": {
-          "value": "{color.orange.300}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.orange.300-45}",
-          "type": "color"
-        },
-        "lighter": {
-          "value": "{color.orange.300-30}",
-          "type": "color"
-        },
-        "lightest": {
-          "value": "{color.orange.300-15}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.orange.400}",
-          "type": "color"
-        },
-        "shade-lighter": {
-          "value": "{color.shade-orange.600-40}",
-          "type": "color"
-        },
-        "shade-normal": {
-          "value": "{color.shade-orange.600}",
-          "type": "color"
-        },
-        "transparent": {
-          "value": "{color.orange.300-0}",
-          "type": "color"
-        }
+      "lightest": {
+        "value": "{purple.300-15}",
+        "type": "color"
       },
-      "green": {
-        "normal": {
-          "value": "{color.green.300}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.green.300-45}",
-          "type": "color"
-        },
-        "lighter": {
-          "value": "{color.green.300-30}",
-          "type": "color"
-        },
-        "lightest": {
-          "value": "{color.green.300-15}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.green.400}",
-          "type": "color"
-        },
-        "shade-lighter": {
-          "value": "{color.shade-green.600-40}",
-          "type": "color"
-        },
-        "shade-normal": {
-          "value": "{color.shade-green.600}",
-          "type": "color"
-        },
-        "transparent": {
-          "value": "{color.green.300-0}",
-          "type": "color"
-        }
+      "dark": {
+        "value": "{purple.400}",
+        "type": "color"
       },
-      "teal": {
-        "normal": {
-          "value": "{color.teal.300}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.teal.300-45}",
-          "type": "color"
-        },
-        "lighter": {
-          "value": "{color.teal.300-30}",
-          "type": "color"
-        },
-        "lightest": {
-          "value": "{color.teal.300-15}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.teal.400}",
-          "type": "color"
-        },
-        "shade-lighter": {
-          "value": "{color.shade-teal.600-40}",
-          "type": "color"
-        },
-        "shade-normal": {
-          "value": "{color.shade-teal.600}",
-          "type": "color"
-        },
-        "transparent": {
-          "value": "{color.teal.300-0}",
-          "type": "color"
-        }
+      "shade-lighter": {
+        "value": "{shade-purple.600-40}",
+        "type": "color"
       },
-      "olive": {
-        "normal": {
-          "value": "{color.olive.300}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.olive.300-45}",
-          "type": "color"
-        },
-        "lighter": {
-          "value": "{color.olive.300-30}",
-          "type": "color"
-        },
-        "lightest": {
-          "value": "{color.olive.300-15}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.olive.400}",
-          "type": "color"
-        },
-        "shade-lighter": {
-          "value": "{color.shade-olive.600-40}",
-          "type": "color"
-        },
-        "shade-normal": {
-          "value": "{color.shade-olive.600}",
-          "type": "color"
-        },
-        "transparent": {
-          "value": "{color.olive.300-0}",
-          "type": "color"
-        }
+      "shade-normal": {
+        "value": "{shade-purple.600}",
+        "type": "color"
       },
-      "yellow": {
-        "normal": {
-          "value": "{color.yellow.300}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.yellow.300-45}",
-          "type": "color"
-        },
-        "lighter": {
-          "value": "{color.yellow.300-30}",
-          "type": "color"
-        },
-        "lightest": {
-          "value": "{color.yellow.300-15}",
-          "type": "color"
-        },
+      "transparent": {
+        "value": "{purple.300-0}",
+        "type": "color"
+      }
+    },
+    "navy": {
+      "normal": {
+        "value": "{navy.300}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{navy.300-45}",
+        "type": "color"
+      },
+      "lighter": {
+        "value": "{navy.300-30}",
+        "type": "color"
+      },
+      "lightest": {
+        "value": "{navy.300-15}",
+        "type": "color"
+      },
+      "dark": {
+        "value": "{navy.400}",
+        "type": "color"
+      },
+      "shade-lighter": {
+        "value": "{shade-navy.600-40}",
+        "type": "color"
+      },
+      "shade-normal": {
+        "value": "{shade-navy.600}",
+        "type": "color"
+      },
+      "transparent": {
+        "value": "{navy.300-0}",
+        "type": "color"
+      }
+    },
+    "absolute": {
+      "black": {
         "dark": {
-          "value": "{color.yellow.400}",
-          "type": "color"
-        },
-        "shade-lighter": {
-          "value": "{color.shade-yellow.600-40}",
-          "type": "color"
-        },
-        "shade-normal": {
-          "value": "{color.shade-yellow.600}",
+          "value": "{black.100}",
           "type": "color"
         },
-        "transparent": {
-          "value": "{color.yellow.300-0}",
-          "type": "color"
-        }
-      },
-      "pink": {
         "normal": {
-          "value": "{color.pink.300}",
+          "value": "{black.85}",
           "type": "color"
         },
         "light": {
-          "value": "{color.pink.300-45}",
+          "value": "{black.60}",
           "type": "color"
         },
         "lighter": {
-          "value": "{color.pink.300-30}",
+          "value": "{black.40}",
           "type": "color"
         },
         "lightest": {
-          "value": "{color.pink.300-15}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.pink.400}",
-          "type": "color"
-        },
-        "shade-lighter": {
-          "value": "{color.shade-pink.600-40}",
-          "type": "color"
-        },
-        "shade-normal": {
-          "value": "{color.shade-pink.600}",
+          "value": "{black.20}",
           "type": "color"
         },
         "transparent": {
-          "value": "{color.pink.300-0}",
+          "value": "{black.0}",
           "type": "color"
         }
       },
-      "purple": {
-        "normal": {
-          "value": "{color.purple.300}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.purple.300-45}",
-          "type": "color"
-        },
-        "lighter": {
-          "value": "{color.purple.300-30}",
-          "type": "color"
-        },
-        "lightest": {
-          "value": "{color.purple.300-15}",
-          "type": "color"
-        },
+      "white": {
         "dark": {
-          "value": "{color.purple.400}",
-          "type": "color"
-        },
-        "shade-lighter": {
-          "value": "{color.shade-purple.600-40}",
-          "type": "color"
-        },
-        "shade-normal": {
-          "value": "{color.shade-purple.600}",
+          "value": "{white.100}",
           "type": "color"
         },
-        "transparent": {
-          "value": "{color.purple.300-0}",
-          "type": "color"
-        }
-      },
-      "navy": {
         "normal": {
-          "value": "{color.navy.300}",
+          "value": "{white.90}",
           "type": "color"
         },
         "light": {
-          "value": "{color.navy.300-45}",
+          "value": "{white.60}",
           "type": "color"
         },
         "lighter": {
-          "value": "{color.navy.300-30}",
+          "value": "{white.40}",
           "type": "color"
         },
         "lightest": {
-          "value": "{color.navy.300-15}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.navy.400}",
-          "type": "color"
-        },
-        "shade-lighter": {
-          "value": "{color.shade-navy.600-40}",
-          "type": "color"
-        },
-        "shade-normal": {
-          "value": "{color.shade-navy.600}",
+          "value": "{white.20}",
           "type": "color"
         },
         "transparent": {
-          "value": "{color.navy.300-0}",
+          "value": "{white.0}",
           "type": "color"
         }
-      },
-      "absolute": {
-        "black": {
-          "dark": {
-            "value": "{color.black.100}",
-            "type": "color"
-          },
-          "normal": {
-            "value": "{color.black.85}",
-            "type": "color"
-          },
-          "light": {
-            "value": "{color.black.60}",
-            "type": "color"
-          },
-          "lighter": {
-            "value": "{color.black.40}",
-            "type": "color"
-          },
-          "lightest": {
-            "value": "{color.black.20}",
-            "type": "color"
-          },
-          "transparent": {
-            "value": "{color.black.0}",
-            "type": "color"
-          }
-        },
-        "white": {
-          "dark": {
-            "value": "{color.white.100}",
-            "type": "color"
-          },
-          "normal": {
-            "value": "{color.white.90}",
-            "type": "color"
-          },
-          "light": {
-            "value": "{color.white.60}",
-            "type": "color"
-          },
-          "lighter": {
-            "value": "{color.white.40}",
-            "type": "color"
-          },
-          "lightest": {
-            "value": "{color.white.20}",
-            "type": "color"
-          },
-          "transparent": {
-            "value": "{color.white.0}",
-            "type": "color"
-          }
-        }
       }
+    }
+  },
+  "surface": {
+    "lowest": {
+      "value": "{grey.800}",
+      "type": "color"
     },
-    "surface": {
-      "lowest": {
-        "value": "{color.grey.800}",
-        "type": "color"
-      },
-      "lower": {
-        "value": "{color.grey.850}",
-        "type": "color"
-      },
-      "normal": {
-        "value": "{color.grey.900}",
-        "type": "color"
-      }
+    "lower": {
+      "value": "{grey.850}",
+      "type": "color"
     },
-    "shadow": {
-      "xlarge": {
-        "value": "{color.black.60}",
-        "type": "color"
-      },
-      "large": {
-        "value": "{color.black.40}",
-        "type": "color"
-      },
-      "medium": {
-        "value": "{color.black.20}",
-        "type": "color"
-      },
-      "small": {
-        "value": "{color.black.15}",
-        "type": "color"
-      },
-      "base": {
-        "value": "{color.black.8}",
+    "normal": {
+      "value": "{grey.900}",
+      "type": "color"
+    }
+  },
+  "shadow": {
+    "xlarge": {
+      "value": "{black.60}",
+      "type": "color"
+    },
+    "large": {
+      "value": "{black.40}",
+      "type": "color"
+    },
+    "medium": {
+      "value": "{black.20}",
+      "type": "color"
+    },
+    "small": {
+      "value": "{black.15}",
+      "type": "color"
+    },
+    "base": {
+      "value": "{black.8}",
+      "type": "color"
+    },
+    "base-inner": {
+      "value": "{white.8}",
+      "type": "color"
+    }
+  },
+  "dim": {
+    "black": {
+      "light": {
+        "value": "{bg.absolute.black.lightest}",
         "type": "color"
       },
-      "base-inner": {
-        "value": "{color.white.8}",
+      "normal": {
+        "value": "{bg.absolute.black.lighter}",
         "type": "color"
       }
-    },
-    "dim": {
-      "black": {
-        "light": {
-          "value": "{color.bg.absolute.black.lightest}",
-          "type": "color"
-        },
-        "normal": {
-          "value": "{color.bg.absolute.black.lighter}",
-          "type": "color"
-        }
-      }
     }
   }
 }
diff --git a/packages/bezier-tokens/src/alpha/functional/gradient.json b/packages/bezier-tokens/src/alpha/functional/gradient.json
index d556368670..1e7ae30d6f 100644
--- a/packages/bezier-tokens/src/alpha/functional/gradient.json
+++ b/packages/bezier-tokens/src/alpha/functional/gradient.json
@@ -4,11 +4,11 @@
       "black": {
         "value": [
           {
-            "color": "{color.bg.black.light}",
+            "color": "{bg.black.light}",
             "position": "0%"
           },
           {
-            "color": "{color.bg.black.dark}",
+            "color": "{bg.black.dark}",
             "position": "100%"
           }
         ],
diff --git a/packages/bezier-tokens/src/alpha/functional/light-theme/color.json b/packages/bezier-tokens/src/alpha/functional/light-theme/color.json
index 1df4d8d390..9714ede9ba 100644
--- a/packages/bezier-tokens/src/alpha/functional/light-theme/color.json
+++ b/packages/bezier-tokens/src/alpha/functional/light-theme/color.json
@@ -1,874 +1,872 @@
 {
-  "color": {
-    "fg": {
-      "black": {
-        "pure": {
-          "value": "{color.black.100}",
-          "type": "color"
-        },
-        "darkest": {
-          "value": "{color.black.85}",
-          "type": "color"
-        },
-        "darker": {
-          "value": "{color.black.60}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.black.40}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.black.15}",
-          "type": "color"
-        },
-        "lightest": {
-          "value": "{color.black.8}",
-          "type": "color"
-        }
+  "fg": {
+    "black": {
+      "pure": {
+        "value": "{black.100}",
+        "type": "color"
       },
-      "white": {
-        "normal": {
-          "value": "{color.white.100}",
-          "type": "color"
-        }
+      "darkest": {
+        "value": "{black.85}",
+        "type": "color"
       },
-      "blue": {
-        "normal": {
-          "value": "{color.blue.400}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.blue.400-30}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.blue.500}",
-          "type": "color"
-        }
+      "darker": {
+        "value": "{black.60}",
+        "type": "color"
       },
-      "cobalt": {
-        "normal": {
-          "value": "{color.cobalt.400}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.cobalt.400-30}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.cobalt.500}",
-          "type": "color"
-        }
+      "dark": {
+        "value": "{black.40}",
+        "type": "color"
       },
-      "red": {
-        "normal": {
-          "value": "{color.red.400}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.red.400-30}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.red.500}",
-          "type": "color"
-        }
+      "light": {
+        "value": "{black.15}",
+        "type": "color"
       },
-      "orange": {
-        "normal": {
-          "value": "{color.orange.400}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.orange.400-30}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.orange.500}",
-          "type": "color"
-        }
+      "lightest": {
+        "value": "{black.8}",
+        "type": "color"
+      }
+    },
+    "white": {
+      "normal": {
+        "value": "{white.100}",
+        "type": "color"
+      }
+    },
+    "blue": {
+      "normal": {
+        "value": "{blue.400}",
+        "type": "color"
       },
-      "green": {
-        "normal": {
-          "value": "{color.green.400}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.green.400-30}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.green.500}",
-          "type": "color"
-        }
+      "light": {
+        "value": "{blue.400-30}",
+        "type": "color"
       },
-      "teal": {
-        "normal": {
-          "value": "{color.teal.400}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.teal.400-30}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.teal.500}",
-          "type": "color"
-        }
+      "dark": {
+        "value": "{blue.500}",
+        "type": "color"
+      }
+    },
+    "cobalt": {
+      "normal": {
+        "value": "{cobalt.400}",
+        "type": "color"
       },
-      "olive": {
-        "normal": {
-          "value": "{color.olive.400}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.olive.400-30}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.olive.500}",
-          "type": "color"
-        }
+      "light": {
+        "value": "{cobalt.400-30}",
+        "type": "color"
       },
-      "yellow": {
-        "normal": {
-          "value": "{color.yellow.400}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.yellow.400-30}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.yellow.500}",
-          "type": "color"
-        }
+      "dark": {
+        "value": "{cobalt.500}",
+        "type": "color"
+      }
+    },
+    "red": {
+      "normal": {
+        "value": "{red.400}",
+        "type": "color"
       },
-      "pink": {
-        "normal": {
-          "value": "{color.pink.400}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.pink.400-30}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.pink.500}",
-          "type": "color"
-        }
+      "light": {
+        "value": "{red.400-30}",
+        "type": "color"
       },
-      "purple": {
-        "normal": {
-          "value": "{color.purple.400}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.purple.400-30}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.purple.500}",
-          "type": "color"
-        }
+      "dark": {
+        "value": "{red.500}",
+        "type": "color"
+      }
+    },
+    "orange": {
+      "normal": {
+        "value": "{orange.400}",
+        "type": "color"
       },
-      "navy": {
-        "normal": {
-          "value": "{color.navy.400}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.navy.400-30}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.navy.500}",
-          "type": "color"
-        }
+      "light": {
+        "value": "{orange.400-30}",
+        "type": "color"
       },
-      "absolute": {
-        "black": {
-          "dark": {
-            "value": "{color.black.100}",
-            "type": "color"
-          },
-          "normal": {
-            "value": "{color.black.85}",
-            "type": "color"
-          },
-          "light": {
-            "value": "{color.black.60}",
-            "type": "color"
-          },
-          "lighter": {
-            "value": "{color.black.40}",
-            "type": "color"
-          },
-          "lightest": {
-            "value": "{color.black.20}",
-            "type": "color"
-          }
-        },
-        "white": {
-          "dark": {
-            "value": "{color.white.100}",
-            "type": "color"
-          },
-          "normal": {
-            "value": "{color.white.90}",
-            "type": "color"
-          },
-          "light": {
-            "value": "{color.white.60}",
-            "type": "color"
-          },
-          "lighter": {
-            "value": "{color.white.40}",
-            "type": "color"
-          },
-          "lightest": {
-            "value": "{color.white.20}",
-            "type": "color"
-          }
-        }
+      "dark": {
+        "value": "{orange.500}",
+        "type": "color"
+      }
+    },
+    "green": {
+      "normal": {
+        "value": "{green.400}",
+        "type": "color"
       },
-      "grey": {
-        "darkest": {
-          "value": "{color.grey.900}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.grey.500}",
-          "type": "color"
-        },
-        "normal": {
-          "value": "{color.grey.400}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.grey.200}",
-          "type": "color"
-        },
-        "lighter": {
-          "value": "{color.grey.100}",
-          "type": "color"
-        },
-        "lightest": {
-          "value": "{color.grey.50}",
-          "type": "color"
-        }
+      "light": {
+        "value": "{green.400-30}",
+        "type": "color"
       },
-      "grey-alpha": {
-        "darker": {
-          "value": "{color.grey-alpha.200-80}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.grey-alpha.100-80}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.grey-alpha.50-80}",
-          "type": "color"
-        }
+      "dark": {
+        "value": "{green.500}",
+        "type": "color"
+      }
+    },
+    "teal": {
+      "normal": {
+        "value": "{teal.400}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{teal.400-30}",
+        "type": "color"
+      },
+      "dark": {
+        "value": "{teal.500}",
+        "type": "color"
+      }
+    },
+    "olive": {
+      "normal": {
+        "value": "{olive.400}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{olive.400-30}",
+        "type": "color"
+      },
+      "dark": {
+        "value": "{olive.500}",
+        "type": "color"
+      }
+    },
+    "yellow": {
+      "normal": {
+        "value": "{yellow.400}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{yellow.400-30}",
+        "type": "color"
+      },
+      "dark": {
+        "value": "{yellow.500}",
+        "type": "color"
+      }
+    },
+    "pink": {
+      "normal": {
+        "value": "{pink.400}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{pink.400-30}",
+        "type": "color"
+      },
+      "dark": {
+        "value": "{pink.500}",
+        "type": "color"
+      }
+    },
+    "purple": {
+      "normal": {
+        "value": "{purple.400}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{purple.400-30}",
+        "type": "color"
+      },
+      "dark": {
+        "value": "{purple.500}",
+        "type": "color"
+      }
+    },
+    "navy": {
+      "normal": {
+        "value": "{navy.400}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{navy.400-30}",
+        "type": "color"
+      },
+      "dark": {
+        "value": "{navy.500}",
+        "type": "color"
       }
     },
-    "bg": {
+    "absolute": {
       "black": {
-        "darkest": {
-          "value": "{color.black.60}",
-          "type": "color"
-        },
-        "darker": {
-          "value": "{color.black.40}",
+        "dark": {
+          "value": "{black.100}",
           "type": "color"
         },
-        "dark": {
-          "value": "{color.black.15}",
+        "normal": {
+          "value": "{black.85}",
           "type": "color"
         },
         "light": {
-          "value": "{color.black.8}",
+          "value": "{black.60}",
           "type": "color"
         },
         "lighter": {
-          "value": "{color.black.5}",
+          "value": "{black.40}",
           "type": "color"
         },
         "lightest": {
-          "value": "{color.black.3}",
-          "type": "color"
-        },
-        "transparent": {
-          "value": "{color.black.0}",
+          "value": "{black.20}",
           "type": "color"
         }
       },
-      "grey": {
-        "darkest": {
-          "value": "{color.grey.900}",
+      "white": {
+        "dark": {
+          "value": "{white.100}",
           "type": "color"
         },
-        "dark": {
-          "value": "{color.grey.500}",
+        "normal": {
+          "value": "{white.90}",
           "type": "color"
         },
         "light": {
-          "value": "{color.grey.200}",
+          "value": "{white.60}",
           "type": "color"
         },
         "lighter": {
-          "value": "{color.grey.100}",
+          "value": "{white.40}",
           "type": "color"
         },
         "lightest": {
-          "value": "{color.grey.50}",
-          "type": "color"
-        },
-        "transparent": {
-          "value": "{color.grey.900-0}",
-          "type": "color"
-        },
-        "normal": {
-          "value": "{color.grey.400}",
+          "value": "{white.20}",
           "type": "color"
         }
+      }
+    },
+    "grey": {
+      "darkest": {
+        "value": "{grey.900}",
+        "type": "color"
       },
-      "grey-alpha": {
-        "darkest": {
-          "value": "{color.grey-alpha.200-80}",
-          "type": "color"
-        },
-        "darker": {
-          "value": "{color.grey-alpha.100-90}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.grey-alpha.100-80}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.grey-alpha.50-80}",
-          "type": "color"
-        }
+      "dark": {
+        "value": "{grey.500}",
+        "type": "color"
       },
-      "white": {
-        "highest": {
-          "value": "{color.white.100}",
-          "type": "color"
-        },
-        "higher": {
-          "value": "{color.white.100}",
-          "type": "color"
-        },
-        "normal": {
-          "value": "{color.white.100}",
-          "type": "color"
-        },
-        "transparent": {
-          "value": "{color.white.0}",
-          "type": "color"
-        }
+      "normal": {
+        "value": "{grey.400}",
+        "type": "color"
       },
-      "white-alpha": {
-        "lightest": {
-          "value": "{color.white.90}",
-          "type": "color"
-        },
-        "lighter": {
-          "value": "{color.white.60}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.white.20}",
-          "type": "color"
-        },
-        "transparent": {
-          "value": "{color.white.0}",
-          "type": "color"
-        }
+      "light": {
+        "value": "{grey.200}",
+        "type": "color"
       },
-      "blue": {
-        "normal": {
-          "value": "{color.blue.400}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.blue.400-30}",
-          "type": "color"
-        },
-        "lighter": {
-          "value": "{color.blue.400-20}",
-          "type": "color"
-        },
-        "lightest": {
-          "value": "{color.blue.400-10}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.blue.500}",
-          "type": "color"
-        },
-        "shade-lighter": {
-          "value": "{color.shade-blue.400-20}",
-          "type": "color"
-        },
-        "shade-normal": {
-          "value": "{color.shade-blue.400}",
-          "type": "color"
-        },
-        "transparent": {
-          "value": "{color.blue.400-0}",
-          "type": "color"
-        }
+      "lighter": {
+        "value": "{grey.100}",
+        "type": "color"
+      },
+      "lightest": {
+        "value": "{grey.50}",
+        "type": "color"
+      }
+    },
+    "grey-alpha": {
+      "darker": {
+        "value": "{grey-alpha.200-80}",
+        "type": "color"
+      },
+      "dark": {
+        "value": "{grey-alpha.100-80}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{grey-alpha.50-80}",
+        "type": "color"
+      }
+    }
+  },
+  "bg": {
+    "black": {
+      "darkest": {
+        "value": "{black.60}",
+        "type": "color"
+      },
+      "darker": {
+        "value": "{black.40}",
+        "type": "color"
+      },
+      "dark": {
+        "value": "{black.15}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{black.8}",
+        "type": "color"
+      },
+      "lighter": {
+        "value": "{black.5}",
+        "type": "color"
+      },
+      "lightest": {
+        "value": "{black.3}",
+        "type": "color"
+      },
+      "transparent": {
+        "value": "{black.0}",
+        "type": "color"
+      }
+    },
+    "grey": {
+      "darkest": {
+        "value": "{grey.900}",
+        "type": "color"
+      },
+      "dark": {
+        "value": "{grey.500}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{grey.200}",
+        "type": "color"
+      },
+      "lighter": {
+        "value": "{grey.100}",
+        "type": "color"
+      },
+      "lightest": {
+        "value": "{grey.50}",
+        "type": "color"
+      },
+      "transparent": {
+        "value": "{grey.900-0}",
+        "type": "color"
+      },
+      "normal": {
+        "value": "{grey.400}",
+        "type": "color"
+      }
+    },
+    "grey-alpha": {
+      "darkest": {
+        "value": "{grey-alpha.200-80}",
+        "type": "color"
+      },
+      "darker": {
+        "value": "{grey-alpha.100-90}",
+        "type": "color"
+      },
+      "dark": {
+        "value": "{grey-alpha.100-80}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{grey-alpha.50-80}",
+        "type": "color"
+      }
+    },
+    "white": {
+      "highest": {
+        "value": "{white.100}",
+        "type": "color"
+      },
+      "higher": {
+        "value": "{white.100}",
+        "type": "color"
+      },
+      "normal": {
+        "value": "{white.100}",
+        "type": "color"
+      },
+      "transparent": {
+        "value": "{white.0}",
+        "type": "color"
+      }
+    },
+    "white-alpha": {
+      "lightest": {
+        "value": "{white.90}",
+        "type": "color"
+      },
+      "lighter": {
+        "value": "{white.60}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{white.20}",
+        "type": "color"
+      },
+      "transparent": {
+        "value": "{white.0}",
+        "type": "color"
+      }
+    },
+    "blue": {
+      "normal": {
+        "value": "{blue.400}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{blue.400-30}",
+        "type": "color"
+      },
+      "lighter": {
+        "value": "{blue.400-20}",
+        "type": "color"
+      },
+      "lightest": {
+        "value": "{blue.400-10}",
+        "type": "color"
+      },
+      "dark": {
+        "value": "{blue.500}",
+        "type": "color"
+      },
+      "shade-lighter": {
+        "value": "{shade-blue.400-20}",
+        "type": "color"
+      },
+      "shade-normal": {
+        "value": "{shade-blue.400}",
+        "type": "color"
+      },
+      "transparent": {
+        "value": "{blue.400-0}",
+        "type": "color"
+      }
+    },
+    "cobalt": {
+      "normal": {
+        "value": "{cobalt.400}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{cobalt.400-30}",
+        "type": "color"
+      },
+      "lighter": {
+        "value": "{cobalt.400-20}",
+        "type": "color"
+      },
+      "lightest": {
+        "value": "{cobalt.400-10}",
+        "type": "color"
+      },
+      "dark": {
+        "value": "{cobalt.500}",
+        "type": "color"
+      },
+      "shade-lighter": {
+        "value": "{shade-cobalt.400-20}",
+        "type": "color"
+      },
+      "shade-normal": {
+        "value": "{shade-cobalt.400}",
+        "type": "color"
+      },
+      "transparent": {
+        "value": "{cobalt.400-0}",
+        "type": "color"
+      }
+    },
+    "red": {
+      "normal": {
+        "value": "{red.400}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{red.400-30}",
+        "type": "color"
+      },
+      "lighter": {
+        "value": "{red.400-20}",
+        "type": "color"
+      },
+      "lightest": {
+        "value": "{red.400-10}",
+        "type": "color"
+      },
+      "dark": {
+        "value": "{red.500}",
+        "type": "color"
+      },
+      "shade-lighter": {
+        "value": "{shade-red.400-20}",
+        "type": "color"
+      },
+      "shade-normal": {
+        "value": "{shade-red.400}",
+        "type": "color"
+      },
+      "transparent": {
+        "value": "{red.400-0}",
+        "type": "color"
+      }
+    },
+    "orange": {
+      "normal": {
+        "value": "{orange.400}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{orange.400-30}",
+        "type": "color"
+      },
+      "lighter": {
+        "value": "{orange.400-20}",
+        "type": "color"
+      },
+      "lightest": {
+        "value": "{orange.400-10}",
+        "type": "color"
+      },
+      "dark": {
+        "value": "{orange.500}",
+        "type": "color"
+      },
+      "shade-lighter": {
+        "value": "{shade-orange.400-20}",
+        "type": "color"
+      },
+      "shade-normal": {
+        "value": "{shade-orange.400}",
+        "type": "color"
+      },
+      "transparent": {
+        "value": "{orange.400-0}",
+        "type": "color"
+      }
+    },
+    "green": {
+      "normal": {
+        "value": "{green.400}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{green.400-30}",
+        "type": "color"
+      },
+      "lighter": {
+        "value": "{green.400-20}",
+        "type": "color"
+      },
+      "lightest": {
+        "value": "{green.400-10}",
+        "type": "color"
+      },
+      "dark": {
+        "value": "{green.500}",
+        "type": "color"
+      },
+      "shade-lighter": {
+        "value": "{shade-green.400-20}",
+        "type": "color"
+      },
+      "shade-normal": {
+        "value": "{shade-green.400}",
+        "type": "color"
+      },
+      "transparent": {
+        "value": "{green.400-0}",
+        "type": "color"
+      }
+    },
+    "teal": {
+      "normal": {
+        "value": "{teal.400}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{teal.400-30}",
+        "type": "color"
+      },
+      "lighter": {
+        "value": "{teal.400-20}",
+        "type": "color"
+      },
+      "lightest": {
+        "value": "{teal.400-10}",
+        "type": "color"
+      },
+      "dark": {
+        "value": "{teal.500}",
+        "type": "color"
+      },
+      "shade-lighter": {
+        "value": "{shade-teal.400-20}",
+        "type": "color"
+      },
+      "shade-normal": {
+        "value": "{shade-teal.400}",
+        "type": "color"
+      },
+      "transparent": {
+        "value": "{teal.400-0}",
+        "type": "color"
+      }
+    },
+    "olive": {
+      "normal": {
+        "value": "{olive.400}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{olive.400-30}",
+        "type": "color"
+      },
+      "lighter": {
+        "value": "{olive.400-20}",
+        "type": "color"
+      },
+      "lightest": {
+        "value": "{olive.400-10}",
+        "type": "color"
+      },
+      "dark": {
+        "value": "{olive.500}",
+        "type": "color"
+      },
+      "shade-lighter": {
+        "value": "{shade-olive.400-20}",
+        "type": "color"
+      },
+      "shade-normal": {
+        "value": "{shade-olive.400}",
+        "type": "color"
+      },
+      "transparent": {
+        "value": "{olive.400-0}",
+        "type": "color"
+      }
+    },
+    "yellow": {
+      "normal": {
+        "value": "{yellow.400}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{yellow.400-30}",
+        "type": "color"
+      },
+      "lighter": {
+        "value": "{yellow.400-20}",
+        "type": "color"
+      },
+      "lightest": {
+        "value": "{yellow.400-10}",
+        "type": "color"
+      },
+      "dark": {
+        "value": "{yellow.500}",
+        "type": "color"
+      },
+      "shade-lighter": {
+        "value": "{shade-yellow.400-20}",
+        "type": "color"
+      },
+      "shade-normal": {
+        "value": "{shade-yellow.400}",
+        "type": "color"
+      },
+      "transparent": {
+        "value": "{yellow.400-0}",
+        "type": "color"
+      }
+    },
+    "pink": {
+      "normal": {
+        "value": "{pink.400}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{pink.400-30}",
+        "type": "color"
+      },
+      "lighter": {
+        "value": "{pink.400-20}",
+        "type": "color"
+      },
+      "lightest": {
+        "value": "{pink.400-10}",
+        "type": "color"
+      },
+      "dark": {
+        "value": "{pink.500}",
+        "type": "color"
+      },
+      "shade-lighter": {
+        "value": "{shade-pink.400-20}",
+        "type": "color"
+      },
+      "shade-normal": {
+        "value": "{shade-pink.400}",
+        "type": "color"
+      },
+      "transparent": {
+        "value": "{pink.400-0}",
+        "type": "color"
+      }
+    },
+    "purple": {
+      "normal": {
+        "value": "{purple.400}",
+        "type": "color"
       },
-      "cobalt": {
-        "normal": {
-          "value": "{color.cobalt.400}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.cobalt.400-30}",
-          "type": "color"
-        },
-        "lighter": {
-          "value": "{color.cobalt.400-20}",
-          "type": "color"
-        },
-        "lightest": {
-          "value": "{color.cobalt.400-10}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.cobalt.500}",
-          "type": "color"
-        },
-        "shade-lighter": {
-          "value": "{color.shade-cobalt.400-20}",
-          "type": "color"
-        },
-        "shade-normal": {
-          "value": "{color.shade-cobalt.400}",
-          "type": "color"
-        },
-        "transparent": {
-          "value": "{color.cobalt.400-0}",
-          "type": "color"
-        }
+      "light": {
+        "value": "{purple.400-30}",
+        "type": "color"
       },
-      "red": {
-        "normal": {
-          "value": "{color.red.400}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.red.400-30}",
-          "type": "color"
-        },
-        "lighter": {
-          "value": "{color.red.400-20}",
-          "type": "color"
-        },
-        "lightest": {
-          "value": "{color.red.400-10}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.red.500}",
-          "type": "color"
-        },
-        "shade-lighter": {
-          "value": "{color.shade-red.400-20}",
-          "type": "color"
-        },
-        "shade-normal": {
-          "value": "{color.shade-red.400}",
-          "type": "color"
-        },
-        "transparent": {
-          "value": "{color.red.400-0}",
-          "type": "color"
-        }
+      "lighter": {
+        "value": "{purple.400-20}",
+        "type": "color"
       },
-      "orange": {
-        "normal": {
-          "value": "{color.orange.400}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.orange.400-30}",
-          "type": "color"
-        },
-        "lighter": {
-          "value": "{color.orange.400-20}",
-          "type": "color"
-        },
-        "lightest": {
-          "value": "{color.orange.400-10}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.orange.500}",
-          "type": "color"
-        },
-        "shade-lighter": {
-          "value": "{color.shade-orange.400-20}",
-          "type": "color"
-        },
-        "shade-normal": {
-          "value": "{color.shade-orange.400}",
-          "type": "color"
-        },
-        "transparent": {
-          "value": "{color.orange.400-0}",
-          "type": "color"
-        }
+      "lightest": {
+        "value": "{purple.400-10}",
+        "type": "color"
       },
-      "green": {
-        "normal": {
-          "value": "{color.green.400}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.green.400-30}",
-          "type": "color"
-        },
-        "lighter": {
-          "value": "{color.green.400-20}",
-          "type": "color"
-        },
-        "lightest": {
-          "value": "{color.green.400-10}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.green.500}",
-          "type": "color"
-        },
-        "shade-lighter": {
-          "value": "{color.shade-green.400-20}",
-          "type": "color"
-        },
-        "shade-normal": {
-          "value": "{color.shade-green.400}",
-          "type": "color"
-        },
-        "transparent": {
-          "value": "{color.green.400-0}",
-          "type": "color"
-        }
+      "dark": {
+        "value": "{purple.500}",
+        "type": "color"
       },
-      "teal": {
-        "normal": {
-          "value": "{color.teal.400}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.teal.400-30}",
-          "type": "color"
-        },
-        "lighter": {
-          "value": "{color.teal.400-20}",
-          "type": "color"
-        },
-        "lightest": {
-          "value": "{color.teal.400-10}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.teal.500}",
-          "type": "color"
-        },
-        "shade-lighter": {
-          "value": "{color.shade-teal.400-20}",
-          "type": "color"
-        },
-        "shade-normal": {
-          "value": "{color.shade-teal.400}",
-          "type": "color"
-        },
-        "transparent": {
-          "value": "{color.teal.400-0}",
-          "type": "color"
-        }
+      "shade-lighter": {
+        "value": "{shade-purple.400-20}",
+        "type": "color"
       },
-      "olive": {
-        "normal": {
-          "value": "{color.olive.400}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.olive.400-30}",
-          "type": "color"
-        },
-        "lighter": {
-          "value": "{color.olive.400-20}",
-          "type": "color"
-        },
-        "lightest": {
-          "value": "{color.olive.400-10}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.olive.500}",
-          "type": "color"
-        },
-        "shade-lighter": {
-          "value": "{color.shade-olive.400-20}",
-          "type": "color"
-        },
-        "shade-normal": {
-          "value": "{color.shade-olive.400}",
-          "type": "color"
-        },
-        "transparent": {
-          "value": "{color.olive.400-0}",
-          "type": "color"
-        }
+      "shade-normal": {
+        "value": "{shade-purple.400}",
+        "type": "color"
       },
-      "yellow": {
-        "normal": {
-          "value": "{color.yellow.400}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.yellow.400-30}",
-          "type": "color"
-        },
-        "lighter": {
-          "value": "{color.yellow.400-20}",
-          "type": "color"
-        },
-        "lightest": {
-          "value": "{color.yellow.400-10}",
-          "type": "color"
-        },
+      "transparent": {
+        "value": "{purple.400-0}",
+        "type": "color"
+      }
+    },
+    "navy": {
+      "normal": {
+        "value": "{navy.400}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{navy.400-30}",
+        "type": "color"
+      },
+      "lighter": {
+        "value": "{navy.400-20}",
+        "type": "color"
+      },
+      "lightest": {
+        "value": "{navy.400-10}",
+        "type": "color"
+      },
+      "dark": {
+        "value": "{navy.500}",
+        "type": "color"
+      },
+      "shade-lighter": {
+        "value": "{shade-navy.400-20}",
+        "type": "color"
+      },
+      "shade-normal": {
+        "value": "{shade-navy.400}",
+        "type": "color"
+      },
+      "transparent": {
+        "value": "{navy.400-0}",
+        "type": "color"
+      }
+    },
+    "absolute": {
+      "black": {
         "dark": {
-          "value": "{color.yellow.500}",
-          "type": "color"
-        },
-        "shade-lighter": {
-          "value": "{color.shade-yellow.400-20}",
-          "type": "color"
-        },
-        "shade-normal": {
-          "value": "{color.shade-yellow.400}",
+          "value": "{black.100}",
           "type": "color"
         },
-        "transparent": {
-          "value": "{color.yellow.400-0}",
-          "type": "color"
-        }
-      },
-      "pink": {
         "normal": {
-          "value": "{color.pink.400}",
+          "value": "{black.85}",
           "type": "color"
         },
         "light": {
-          "value": "{color.pink.400-30}",
+          "value": "{black.60}",
           "type": "color"
         },
         "lighter": {
-          "value": "{color.pink.400-20}",
+          "value": "{black.40}",
           "type": "color"
         },
         "lightest": {
-          "value": "{color.pink.400-10}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.pink.500}",
-          "type": "color"
-        },
-        "shade-lighter": {
-          "value": "{color.shade-pink.400-20}",
-          "type": "color"
-        },
-        "shade-normal": {
-          "value": "{color.shade-pink.400}",
+          "value": "{black.20}",
           "type": "color"
         },
         "transparent": {
-          "value": "{color.pink.400-0}",
+          "value": "{black.0}",
           "type": "color"
         }
       },
-      "purple": {
-        "normal": {
-          "value": "{color.purple.400}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.purple.400-30}",
-          "type": "color"
-        },
-        "lighter": {
-          "value": "{color.purple.400-20}",
-          "type": "color"
-        },
-        "lightest": {
-          "value": "{color.purple.400-10}",
-          "type": "color"
-        },
+      "white": {
         "dark": {
-          "value": "{color.purple.500}",
-          "type": "color"
-        },
-        "shade-lighter": {
-          "value": "{color.shade-purple.400-20}",
-          "type": "color"
-        },
-        "shade-normal": {
-          "value": "{color.shade-purple.400}",
+          "value": "{white.100}",
           "type": "color"
         },
-        "transparent": {
-          "value": "{color.purple.400-0}",
-          "type": "color"
-        }
-      },
-      "navy": {
         "normal": {
-          "value": "{color.navy.400}",
+          "value": "{white.90}",
           "type": "color"
         },
         "light": {
-          "value": "{color.navy.400-30}",
+          "value": "{white.60}",
           "type": "color"
         },
         "lighter": {
-          "value": "{color.navy.400-20}",
+          "value": "{white.40}",
           "type": "color"
         },
         "lightest": {
-          "value": "{color.navy.400-10}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.navy.500}",
-          "type": "color"
-        },
-        "shade-lighter": {
-          "value": "{color.shade-navy.400-20}",
-          "type": "color"
-        },
-        "shade-normal": {
-          "value": "{color.shade-navy.400}",
+          "value": "{white.20}",
           "type": "color"
         },
         "transparent": {
-          "value": "{color.navy.400-0}",
+          "value": "{white.0}",
           "type": "color"
         }
-      },
-      "absolute": {
-        "black": {
-          "dark": {
-            "value": "{color.black.100}",
-            "type": "color"
-          },
-          "normal": {
-            "value": "{color.black.85}",
-            "type": "color"
-          },
-          "light": {
-            "value": "{color.black.60}",
-            "type": "color"
-          },
-          "lighter": {
-            "value": "{color.black.40}",
-            "type": "color"
-          },
-          "lightest": {
-            "value": "{color.black.20}",
-            "type": "color"
-          },
-          "transparent": {
-            "value": "{color.black.0}",
-            "type": "color"
-          }
-        },
-        "white": {
-          "dark": {
-            "value": "{color.white.100}",
-            "type": "color"
-          },
-          "normal": {
-            "value": "{color.white.90}",
-            "type": "color"
-          },
-          "light": {
-            "value": "{color.white.60}",
-            "type": "color"
-          },
-          "lighter": {
-            "value": "{color.white.40}",
-            "type": "color"
-          },
-          "lightest": {
-            "value": "{color.white.20}",
-            "type": "color"
-          },
-          "transparent": {
-            "value": "{color.white.0}",
-            "type": "color"
-          }
-        }
       }
+    }
+  },
+  "surface": {
+    "lowest": {
+      "value": "{grey.100}",
+      "type": "color"
     },
-    "surface": {
-      "lowest": {
-        "value": "{color.grey.100}",
-        "type": "color"
-      },
-      "lower": {
-        "value": "{color.grey.50}",
-        "type": "color"
-      },
-      "normal": {
-        "value": "{color.white.100}",
-        "type": "color"
-      }
+    "lower": {
+      "value": "{grey.50}",
+      "type": "color"
     },
-    "shadow": {
-      "xlarge": {
-        "value": "{color.black.30}",
-        "type": "color"
-      },
-      "large": {
-        "value": "{color.black.22}",
-        "type": "color"
-      },
-      "medium": {
-        "value": "{color.black.15}",
-        "type": "color"
-      },
-      "small": {
-        "value": "{color.black.8}",
-        "type": "color"
-      },
-      "base": {
-        "value": "{color.black.5}",
+    "normal": {
+      "value": "{white.100}",
+      "type": "color"
+    }
+  },
+  "shadow": {
+    "xlarge": {
+      "value": "{black.30}",
+      "type": "color"
+    },
+    "large": {
+      "value": "{black.22}",
+      "type": "color"
+    },
+    "medium": {
+      "value": "{black.15}",
+      "type": "color"
+    },
+    "small": {
+      "value": "{black.8}",
+      "type": "color"
+    },
+    "base": {
+      "value": "{black.5}",
+      "type": "color"
+    },
+    "base-inner": {
+      "value": "{white.12}",
+      "type": "color"
+    }
+  },
+  "dim": {
+    "black": {
+      "light": {
+        "value": "{bg.absolute.black.lightest}",
         "type": "color"
       },
-      "base-inner": {
-        "value": "{color.white.12}",
+      "normal": {
+        "value": "{bg.absolute.black.lighter}",
         "type": "color"
       }
-    },
-    "dim": {
-      "black": {
-        "light": {
-          "value": "{color.bg.absolute.black.lightest}",
-          "type": "color"
-        },
-        "normal": {
-          "value": "{color.bg.absolute.black.lighter}",
-          "type": "color"
-        }
-      }
     }
   }
 }
diff --git a/packages/bezier-tokens/src/alpha/functional/shadow.json b/packages/bezier-tokens/src/alpha/functional/shadow.json
index 9ddfdbc55d..f3f2c294ea 100644
--- a/packages/bezier-tokens/src/alpha/functional/shadow.json
+++ b/packages/bezier-tokens/src/alpha/functional/shadow.json
@@ -3,7 +3,7 @@
     "1": {
       "value": [
         {
-          "color": "{color.shadow.base-inner}",
+          "color": "{shadow.base-inner}",
           "type": "innerShadow",
           "offsetX": "0px",
           "offsetY": "0px",
@@ -11,7 +11,7 @@
           "spread": "0px"
         },
         {
-          "color": "{color.shadow.base}",
+          "color": "{shadow.base}",
           "type": "dropShadow",
           "offsetX": "0px",
           "offsetY": "0px",
@@ -19,7 +19,7 @@
           "spread": "1px"
         },
         {
-          "color": "{color.shadow.small}",
+          "color": "{shadow.small}",
           "type": "dropShadow",
           "offsetX": "0px",
           "offsetY": "1px",
@@ -32,7 +32,7 @@
     "2": {
       "value": [
         {
-          "color": "{color.shadow.base-inner}",
+          "color": "{shadow.base-inner}",
           "type": "innerShadow",
           "offsetX": "0px",
           "offsetY": "0px",
@@ -40,7 +40,7 @@
           "spread": "0px"
         },
         {
-          "color": "{color.shadow.base}",
+          "color": "{shadow.base}",
           "type": "dropShadow",
           "offsetX": "0px",
           "offsetY": "0px",
@@ -48,7 +48,7 @@
           "spread": "1px"
         },
         {
-          "color": "{color.shadow.small}",
+          "color": "{shadow.small}",
           "type": "dropShadow",
           "offsetX": "0px",
           "offsetY": "2px",
@@ -61,7 +61,7 @@
     "3": {
       "value": [
         {
-          "color": "{color.shadow.base-inner}",
+          "color": "{shadow.base-inner}",
           "type": "innerShadow",
           "offsetX": "0px",
           "offsetY": "0px",
@@ -69,7 +69,7 @@
           "spread": "0px"
         },
         {
-          "color": "{color.shadow.base}",
+          "color": "{shadow.base}",
           "type": "dropShadow",
           "offsetX": "0px",
           "offsetY": "0px",
@@ -77,7 +77,7 @@
           "spread": "1px"
         },
         {
-          "color": "{color.shadow.medium}",
+          "color": "{shadow.medium}",
           "type": "dropShadow",
           "offsetX": "0px",
           "offsetY": "4px",
@@ -90,7 +90,7 @@
     "4": {
       "value": [
         {
-          "color": "{color.shadow.base-inner}",
+          "color": "{shadow.base-inner}",
           "type": "innerShadow",
           "offsetX": "0px",
           "offsetY": "0px",
@@ -98,7 +98,7 @@
           "spread": "0px"
         },
         {
-          "color": "{color.shadow.base}",
+          "color": "{shadow.base}",
           "type": "dropShadow",
           "offsetX": "0px",
           "offsetY": "0px",
@@ -106,7 +106,7 @@
           "spread": "1px"
         },
         {
-          "color": "{color.shadow.large}",
+          "color": "{shadow.large}",
           "type": "dropShadow",
           "offsetX": "0px",
           "offsetY": "4px",
@@ -119,7 +119,7 @@
     "5": {
       "value": [
         {
-          "color": "{color.shadow.base-inner}",
+          "color": "{shadow.base-inner}",
           "type": "innerShadow",
           "offsetX": "0px",
           "offsetY": "0px",
@@ -127,7 +127,7 @@
           "spread": "0px"
         },
         {
-          "color": "{color.shadow.base}",
+          "color": "{shadow.base}",
           "type": "dropShadow",
           "offsetX": "0px",
           "offsetY": "0px",
@@ -135,7 +135,7 @@
           "spread": "1px"
         },
         {
-          "color": "{color.shadow.xlarge}",
+          "color": "{shadow.xlarge}",
           "type": "dropShadow",
           "offsetX": "0px",
           "offsetY": "6px",
@@ -148,7 +148,7 @@
     "6": {
       "value": [
         {
-          "color": "{color.shadow.base-inner}",
+          "color": "{shadow.base-inner}",
           "type": "innerShadow",
           "offsetX": "0px",
           "offsetY": "0px",
@@ -156,7 +156,7 @@
           "spread": "0px"
         },
         {
-          "color": "{color.shadow.base}",
+          "color": "{shadow.base}",
           "type": "dropShadow",
           "offsetX": "0px",
           "offsetY": "0px",
@@ -164,7 +164,7 @@
           "spread": "1px"
         },
         {
-          "color": "{color.shadow.xlarge}",
+          "color": "{shadow.xlarge}",
           "type": "dropShadow",
           "offsetX": "0px",
           "offsetY": "12px",
diff --git a/packages/bezier-tokens/src/alpha/global/color.json b/packages/bezier-tokens/src/alpha/global/color.json
index d996c5f03f..09ebe64a42 100644
--- a/packages/bezier-tokens/src/alpha/global/color.json
+++ b/packages/bezier-tokens/src/alpha/global/color.json
@@ -1,1028 +1,1026 @@
 {
-  "color": {
-    "blue": {
-      "100": {
-        "value": "#a9c6ff",
-        "type": "color"
-      },
-      "200": {
-        "value": "#96b7ff",
-        "type": "color"
-      },
-      "300": {
-        "value": "#7d9efa",
-        "type": "color"
-      },
-      "400": {
-        "value": "#6d6afc",
-        "type": "color"
-      },
-      "500": {
-        "value": "#5950dc",
-        "type": "color"
-      },
-      "600": {
-        "value": "#4941bc",
-        "type": "color"
-      },
-      "400-30": {
-        "value": "#6d6afc4d",
-        "type": "color"
-      },
-      "400-20": {
-        "value": "#6d6afc33",
-        "type": "color"
-      },
-      "400-10": {
-        "value": "#6d6afc1a",
-        "type": "color"
-      },
-      "400-0": {
-        "value": "#6d6afc00",
-        "type": "color"
-      },
-      "300-45": {
-        "value": "#7d9efa73",
-        "type": "color"
-      },
-      "300-30": {
-        "value": "#7d9efa4d",
-        "type": "color"
-      },
-      "300-15": {
-        "value": "#7d9efa26",
-        "type": "color"
-      },
-      "300-0": {
-        "value": "#7d9efa00",
-        "type": "color"
-      }
-    },
-    "cobalt": {
-      "100": {
-        "value": "#a1d5ff",
-        "type": "color"
-      },
-      "200": {
-        "value": "#8dcafc",
-        "type": "color"
-      },
-      "300": {
-        "value": "#71b9f5",
-        "type": "color"
-      },
-      "400": {
-        "value": "#5093e5",
-        "type": "color"
-      },
-      "500": {
-        "value": "#3870d1",
-        "type": "color"
-      },
-      "600": {
-        "value": "#2b59b5",
-        "type": "color"
-      },
-      "400-30": {
-        "value": "#5093e54d",
-        "type": "color"
-      },
-      "400-20": {
-        "value": "#5093e533",
-        "type": "color"
-      },
-      "400-10": {
-        "value": "#5093e51a",
-        "type": "color"
-      },
-      "400-0": {
-        "value": "#5093e500",
-        "type": "color"
-      },
-      "300-45": {
-        "value": "#71b9f573",
-        "type": "color"
-      },
-      "300-30": {
-        "value": "#71b9f54d",
-        "type": "color"
-      },
-      "300-15": {
-        "value": "#71b9f526",
-        "type": "color"
-      },
-      "300-0": {
-        "value": "#71b9f500",
-        "type": "color"
-      }
-    },
-    "green": {
-      "100": {
-        "value": "#a4ecb3",
-        "type": "color"
-      },
-      "200": {
-        "value": "#84e09a",
-        "type": "color"
-      },
-      "300": {
-        "value": "#68cc7f",
-        "type": "color"
-      },
-      "400": {
-        "value": "#40ad67",
-        "type": "color"
-      },
-      "500": {
-        "value": "#358761",
-        "type": "color"
-      },
-      "600": {
-        "value": "#327055",
-        "type": "color"
-      },
-      "400-30": {
-        "value": "#40ad674d",
-        "type": "color"
-      },
-      "400-20": {
-        "value": "#40ad6733",
-        "type": "color"
-      },
-      "400-10": {
-        "value": "#40ad671a",
-        "type": "color"
-      },
-      "400-0": {
-        "value": "#40ad6700",
-        "type": "color"
-      },
-      "300-45": {
-        "value": "#68cc7f73",
-        "type": "color"
-      },
-      "300-30": {
-        "value": "#68cc7f4d",
-        "type": "color"
-      },
-      "300-15": {
-        "value": "#68cc7f26",
-        "type": "color"
-      },
-      "300-0": {
-        "value": "#68cc7f00",
-        "type": "color"
-      }
-    },
-    "red": {
-      "100": {
-        "value": "#ffb8b8",
-        "type": "color"
-      },
-      "200": {
-        "value": "#ffa6a6",
-        "type": "color"
-      },
-      "300": {
-        "value": "#ff8c8c",
-        "type": "color"
-      },
-      "400": {
-        "value": "#e55c5c",
-        "type": "color"
-      },
-      "500": {
-        "value": "#bc3a42",
-        "type": "color"
-      },
-      "600": {
-        "value": "#992c34",
-        "type": "color"
-      },
-      "400-30": {
-        "value": "#e55c5c4d",
-        "type": "color"
-      },
-      "400-20": {
-        "value": "#e55c5c33",
-        "type": "color"
-      },
-      "400-10": {
-        "value": "#e55c5c1a",
-        "type": "color"
-      },
-      "400-0": {
-        "value": "#e55c5c00",
-        "type": "color"
-      },
-      "300-45": {
-        "value": "#ff8c8c73",
-        "type": "color"
-      },
-      "300-30": {
-        "value": "#ff8c8c4d",
-        "type": "color"
-      },
-      "300-15": {
-        "value": "#ff8c8c26",
-        "type": "color"
-      },
-      "300-0": {
-        "value": "#ff8c8c00",
-        "type": "color"
-      }
-    },
-    "black": {
-      "0": {
-        "value": "#00000000",
-        "type": "color"
-      },
-      "3": {
-        "value": "#00000008",
-        "type": "color"
-      },
-      "5": {
-        "value": "#0000000d",
-        "type": "color"
-      },
-      "8": {
-        "value": "#00000014",
-        "type": "color"
-      },
-      "15": {
-        "value": "#00000026",
-        "type": "color"
-      },
-      "20": {
-        "value": "#00000033",
-        "type": "color"
-      },
-      "22": {
-        "value": "#00000038",
-        "type": "color"
-      },
-      "30": {
-        "value": "#0000004d",
-        "type": "color"
-      },
-      "40": {
-        "value": "#00000066",
-        "type": "color"
-      },
-      "50": {
-        "value": "#00000080",
-        "type": "color"
-      },
-      "60": {
-        "value": "#00000099",
-        "type": "color"
-      },
-      "70": {
-        "value": "#000000b3",
-        "type": "color"
-      },
-      "85": {
-        "value": "#000000d9",
-        "type": "color"
-      },
-      "100": {
-        "value": "#000000",
-        "type": "color"
-      }
-    },
-    "white": {
-      "0": {
-        "value": "#ffffff00",
-        "type": "color"
-      },
-      "5": {
-        "value": "#ffffff0d",
-        "type": "color"
-      },
-      "8": {
-        "value": "#ffffff14",
-        "type": "color"
-      },
-      "12": {
-        "value": "#ffffff1f",
-        "type": "color"
-      },
-      "20": {
-        "value": "#ffffff33",
-        "type": "color"
-      },
-      "40": {
-        "value": "#ffffff66",
-        "type": "color"
-      },
-      "60": {
-        "value": "#ffffff99",
-        "type": "color"
-      },
-      "80": {
-        "value": "#ffffffcc",
-        "type": "color"
-      },
-      "90": {
-        "value": "#ffffffe6",
-        "type": "color"
-      },
-      "100": {
-        "value": "#ffffff",
-        "type": "color"
-      }
-    },
-    "orange": {
-      "100": {
-        "value": "#ffc38f",
-        "type": "color"
-      },
-      "200": {
-        "value": "#ffb070",
-        "type": "color"
-      },
-      "300": {
-        "value": "#ffa15e",
-        "type": "color"
-      },
-      "400": {
-        "value": "#e67f2b",
-        "type": "color"
-      },
-      "500": {
-        "value": "#c1630d",
-        "type": "color"
-      },
-      "600": {
-        "value": "#a1540c",
-        "type": "color"
-      },
-      "400-30": {
-        "value": "#e67f2b4d",
-        "type": "color"
-      },
-      "400-20": {
-        "value": "#e67f2b33",
-        "type": "color"
-      },
-      "400-10": {
-        "value": "#e67f2b1a",
-        "type": "color"
-      },
-      "400-0": {
-        "value": "#e67f2b00",
-        "type": "color"
-      },
-      "300-45": {
-        "value": "#ffa15e73",
-        "type": "color"
-      },
-      "300-30": {
-        "value": "#ffa15e4d",
-        "type": "color"
-      },
-      "300-15": {
-        "value": "#ffa15e26",
-        "type": "color"
-      },
-      "300-0": {
-        "value": "#ffa15e00",
-        "type": "color"
-      }
-    },
-    "yellow": {
-      "100": {
-        "value": "#ffe38f",
-        "type": "color"
-      },
-      "200": {
-        "value": "#fed968",
-        "type": "color"
-      },
-      "300": {
-        "value": "#f9c835",
-        "type": "color"
-      },
-      "400": {
-        "value": "#edae0d",
-        "type": "color"
-      },
-      "500": {
-        "value": "#c38f00",
-        "type": "color"
-      },
-      "600": {
-        "value": "#9e7504",
-        "type": "color"
-      },
-      "400-30": {
-        "value": "#edae0d4d",
-        "type": "color"
-      },
-      "400-20": {
-        "value": "#edae0d33",
-        "type": "color"
-      },
-      "400-10": {
-        "value": "#edae0d1a",
-        "type": "color"
-      },
-      "400-0": {
-        "value": "#edae0d00",
-        "type": "color"
-      },
-      "300-45": {
-        "value": "#f9c83573",
-        "type": "color"
-      },
-      "300-30": {
-        "value": "#f9c8354d",
-        "type": "color"
-      },
-      "300-15": {
-        "value": "#f9c83526",
-        "type": "color"
-      },
-      "300-0": {
-        "value": "#f9c83500",
-        "type": "color"
-      }
-    },
-    "pink": {
-      "100": {
-        "value": "#ffafef",
-        "type": "color"
-      },
-      "200": {
-        "value": "#f896e5",
-        "type": "color"
-      },
-      "300": {
-        "value": "#ec6fd3",
-        "type": "color"
-      },
-      "400": {
-        "value": "#d64bb5",
-        "type": "color"
-      },
-      "500": {
-        "value": "#b0369e",
-        "type": "color"
-      },
-      "600": {
-        "value": "#962c86",
-        "type": "color"
-      },
-      "400-30": {
-        "value": "#d64bb54d",
-        "type": "color"
-      },
-      "400-20": {
-        "value": "#d64bb533",
-        "type": "color"
-      },
-      "400-10": {
-        "value": "#d64bb51a",
-        "type": "color"
-      },
-      "400-0": {
-        "value": "#d64bb500",
-        "type": "color"
-      },
-      "300-45": {
-        "value": "#ec6fd373",
-        "type": "color"
-      },
-      "300-30": {
-        "value": "#ec6fd34d",
-        "type": "color"
-      },
-      "300-15": {
-        "value": "#ec6fd326",
-        "type": "color"
-      },
-      "300-0": {
-        "value": "#ec6fd300",
-        "type": "color"
-      }
-    },
-    "purple": {
-      "100": {
-        "value": "#d1b5ff",
-        "type": "color"
-      },
-      "200": {
-        "value": "#c19aff",
-        "type": "color"
-      },
-      "300": {
-        "value": "#b184ff",
-        "type": "color"
-      },
-      "400": {
-        "value": "#8e57e7",
-        "type": "color"
-      },
-      "500": {
-        "value": "#6735b6",
-        "type": "color"
-      },
-      "600": {
-        "value": "#54278f",
-        "type": "color"
-      },
-      "400-30": {
-        "value": "#8e57e74d",
-        "type": "color"
-      },
-      "400-20": {
-        "value": "#8e57e733",
-        "type": "color"
-      },
-      "400-10": {
-        "value": "#8e57e71a",
-        "type": "color"
-      },
-      "400-0": {
-        "value": "#8e57e700",
-        "type": "color"
-      },
-      "300-45": {
-        "value": "#b184ff73",
-        "type": "color"
-      },
-      "300-30": {
-        "value": "#b184ff4d",
-        "type": "color"
-      },
-      "300-15": {
-        "value": "#b184ff26",
-        "type": "color"
-      },
-      "300-0": {
-        "value": "#b184ff00",
-        "type": "color"
-      }
-    },
-    "navy": {
-      "100": {
-        "value": "#a5b2ee",
-        "type": "color"
-      },
-      "200": {
-        "value": "#8b99d9",
-        "type": "color"
-      },
-      "300": {
-        "value": "#7683d3",
-        "type": "color"
-      },
-      "400": {
-        "value": "#424fab",
-        "type": "color"
-      },
-      "500": {
-        "value": "#353888",
-        "type": "color"
-      },
-      "600": {
-        "value": "#22245b",
-        "type": "color"
-      },
-      "400-30": {
-        "value": "#424fab4d",
-        "type": "color"
-      },
-      "400-20": {
-        "value": "#424fab33",
-        "type": "color"
-      },
-      "400-10": {
-        "value": "#424fab1a",
-        "type": "color"
-      },
-      "400-0": {
-        "value": "#424fab00",
-        "type": "color"
-      },
-      "300-45": {
-        "value": "#7683d373",
-        "type": "color"
-      },
-      "300-30": {
-        "value": "#7683d34d",
-        "type": "color"
-      },
-      "300-15": {
-        "value": "#7683d326",
-        "type": "color"
-      },
-      "300-0": {
-        "value": "#7683d300",
-        "type": "color"
-      }
-    },
-    "teal": {
-      "100": {
-        "value": "#9beee6",
-        "type": "color"
-      },
-      "200": {
-        "value": "#72e0d5",
-        "type": "color"
-      },
-      "300": {
-        "value": "#40d3c5",
-        "type": "color"
-      },
-      "400": {
-        "value": "#09b2ac",
-        "type": "color"
-      },
-      "500": {
-        "value": "#068e95",
-        "type": "color"
-      },
-      "600": {
-        "value": "#06687d",
-        "type": "color"
-      },
-      "400-30": {
-        "value": "#09b2ac4d",
-        "type": "color"
-      },
-      "400-20": {
-        "value": "#09b2ac33",
-        "type": "color"
-      },
-      "400-10": {
-        "value": "#09b2ac1a",
-        "type": "color"
-      },
-      "400-0": {
-        "value": "#09b2ac00",
-        "type": "color"
-      },
-      "300-45": {
-        "value": "#40d3c573",
-        "type": "color"
-      },
-      "300-30": {
-        "value": "#40d3c54d",
-        "type": "color"
-      },
-      "300-15": {
-        "value": "#40d3c526",
-        "type": "color"
-      },
-      "300-0": {
-        "value": "#40d3c500",
-        "type": "color"
-      }
-    },
-    "olive": {
-      "100": {
-        "value": "#e7f17c",
-        "type": "color"
-      },
-      "200": {
-        "value": "#dbe56e",
-        "type": "color"
-      },
-      "300": {
-        "value": "#c8d630",
-        "type": "color"
-      },
-      "400": {
-        "value": "#a9b110",
-        "type": "color"
-      },
-      "500": {
-        "value": "#7b801c",
-        "type": "color"
-      },
-      "600": {
-        "value": "#65691c",
-        "type": "color"
-      },
-      "400-30": {
-        "value": "#a9b1104d",
-        "type": "color"
-      },
-      "400-20": {
-        "value": "#a9b11033",
-        "type": "color"
-      },
-      "400-10": {
-        "value": "#a9b1101a",
-        "type": "color"
-      },
-      "400-0": {
-        "value": "#a9b11000",
-        "type": "color"
-      },
-      "300-45": {
-        "value": "#c8d63073",
-        "type": "color"
-      },
-      "300-30": {
-        "value": "#c8d6304d",
-        "type": "color"
-      },
-      "300-15": {
-        "value": "#c8d63026",
-        "type": "color"
-      },
-      "300-0": {
-        "value": "#c8d63000",
-        "type": "color"
-      }
-    },
-    "grey": {
-      "50": {
-        "value": "#fcfcfc",
-        "type": "color"
-      },
-      "100": {
-        "value": "#f7f7f8",
-        "type": "color"
-      },
-      "200": {
-        "value": "#efeff0",
-        "type": "color"
-      },
-      "300": {
-        "value": "#e2e2e4",
-        "type": "color"
-      },
-      "400": {
-        "value": "#cfcfd1",
-        "type": "color"
-      },
-      "500": {
-        "value": "#a7a7aa",
-        "type": "color"
-      },
-      "600": {
-        "value": "#7b7b7b",
-        "type": "color"
-      },
-      "700": {
-        "value": "#464748",
-        "type": "color"
-      },
-      "800": {
-        "value": "#313234",
-        "type": "color"
-      },
-      "850": {
-        "value": "#2a2b2d",
-        "type": "color"
-      },
-      "900": {
-        "value": "#242428",
-        "type": "color"
-      },
-      "900-0": {
-        "value": "#24242800",
-        "type": "color"
-      }
-    },
-    "grey-alpha": {
-      "900-90": {
-        "value": "#242428e6",
-        "type": "color"
-      },
-      "850-80": {
-        "value": "#2a2b2dcc",
-        "type": "color"
-      },
-      "800-80": {
-        "value": "#313234cc",
-        "type": "color"
-      },
-      "700-80": {
-        "value": "#464748cc",
-        "type": "color"
-      },
-      "200-80": {
-        "value": "#efeff0cc",
-        "type": "color"
-      },
-      "100-80": {
-        "value": "#f7f7f8cc",
-        "type": "color"
-      },
-      "50-80": {
-        "value": "#fcfcfccc",
-        "type": "color"
-      },
-      "100-90": {
-        "value": "#f7f7f8e6",
-        "type": "color"
-      },
-      "800-90": {
-        "value": "#313234e6",
-        "type": "color"
-      }
-    },
-    "shade-blue": {
-      "400": {
-        "value": "#7175e0",
-        "type": "color"
-      },
-      "600": {
-        "value": "#4c5289",
-        "type": "color"
-      },
-      "400-20": {
-        "value": "#7175e033",
-        "type": "color"
-      },
-      "600-40": {
-        "value": "#4c528966",
-        "type": "color"
-      }
-    },
-    "shade-cobalt": {
-      "400": {
-        "value": "#57ace8",
-        "type": "color"
-      },
-      "600": {
-        "value": "#4a6185",
-        "type": "color"
-      },
-      "400-20": {
-        "value": "#57ace833",
-        "type": "color"
-      },
-      "600-40": {
-        "value": "#4a618566",
-        "type": "color"
-      }
-    },
-    "shade-teal": {
-      "400": {
-        "value": "#55aaa7",
-        "type": "color"
-      },
-      "600": {
-        "value": "#47737d",
-        "type": "color"
-      },
-      "400-20": {
-        "value": "#55aaa733",
-        "type": "color"
-      },
-      "600-40": {
-        "value": "#47737d66",
-        "type": "color"
-      }
-    },
-    "shade-red": {
-      "400": {
-        "value": "#de6870",
-        "type": "color"
-      },
-      "600": {
-        "value": "#904248",
-        "type": "color"
-      },
-      "400-20": {
-        "value": "#de687033",
-        "type": "color"
-      },
-      "600-40": {
-        "value": "#90424866",
-        "type": "color"
-      }
-    },
-    "shade-green": {
-      "400": {
-        "value": "#62af7c",
-        "type": "color"
-      },
-      "600": {
-        "value": "#4c7a5e",
-        "type": "color"
-      },
-      "400-20": {
-        "value": "#62af7c33",
-        "type": "color"
-      },
-      "600-40": {
-        "value": "#4c7a5e66",
-        "type": "color"
-      }
-    },
-    "shade-olive": {
-      "400": {
-        "value": "#a5a953",
-        "type": "color"
-      },
-      "600": {
-        "value": "#737638",
-        "type": "color"
-      },
-      "400-20": {
-        "value": "#a5a95333",
-        "type": "color"
-      },
-      "600-40": {
-        "value": "#73763866",
-        "type": "color"
-      }
-    },
-    "shade-yellow": {
-      "400": {
-        "value": "#e8ae3c",
-        "type": "color"
-      },
-      "600": {
-        "value": "#7d6a26",
-        "type": "color"
-      },
-      "400-20": {
-        "value": "#e8ae3c33",
-        "type": "color"
-      },
-      "600-40": {
-        "value": "#7d6a2666",
-        "type": "color"
-      }
-    },
-    "shade-orange": {
-      "400": {
-        "value": "#e08c48",
-        "type": "color"
-      },
-      "600": {
-        "value": "#895a34",
-        "type": "color"
-      },
-      "400-20": {
-        "value": "#e08c4833",
-        "type": "color"
-      },
-      "600-40": {
-        "value": "#895a3466",
-        "type": "color"
-      }
-    },
-    "shade-pink": {
-      "400": {
-        "value": "#d369ba",
-        "type": "color"
-      },
-      "600": {
-        "value": "#854075",
-        "type": "color"
-      },
-      "400-20": {
-        "value": "#d369ba33",
-        "type": "color"
-      },
-      "600-40": {
-        "value": "#85407566",
-        "type": "color"
-      }
-    },
-    "shade-purple": {
-      "400": {
-        "value": "#9d6fe5",
-        "type": "color"
-      },
-      "600": {
-        "value": "#5b467d",
-        "type": "color"
-      },
-      "400-20": {
-        "value": "#9d6fe533",
-        "type": "color"
-      },
-      "600-40": {
-        "value": "#5b467d66",
-        "type": "color"
-      }
-    },
-    "shade-navy": {
-      "400": {
-        "value": "#5f69b0",
-        "type": "color"
-      },
-      "600": {
-        "value": "#373b56",
-        "type": "color"
-      },
-      "400-20": {
-        "value": "#5f69b033",
-        "type": "color"
-      },
-      "600-40": {
-        "value": "#373b5666",
-        "type": "color"
-      }
+  "blue": {
+    "100": {
+      "value": "#a9c6ff",
+      "type": "color"
+    },
+    "200": {
+      "value": "#96b7ff",
+      "type": "color"
+    },
+    "300": {
+      "value": "#7d9efa",
+      "type": "color"
+    },
+    "400": {
+      "value": "#6d6afc",
+      "type": "color"
+    },
+    "500": {
+      "value": "#5950dc",
+      "type": "color"
+    },
+    "600": {
+      "value": "#4941bc",
+      "type": "color"
+    },
+    "400-30": {
+      "value": "#6d6afc4d",
+      "type": "color"
+    },
+    "400-20": {
+      "value": "#6d6afc33",
+      "type": "color"
+    },
+    "400-10": {
+      "value": "#6d6afc1a",
+      "type": "color"
+    },
+    "400-0": {
+      "value": "#6d6afc00",
+      "type": "color"
+    },
+    "300-45": {
+      "value": "#7d9efa73",
+      "type": "color"
+    },
+    "300-30": {
+      "value": "#7d9efa4d",
+      "type": "color"
+    },
+    "300-15": {
+      "value": "#7d9efa26",
+      "type": "color"
+    },
+    "300-0": {
+      "value": "#7d9efa00",
+      "type": "color"
+    }
+  },
+  "cobalt": {
+    "100": {
+      "value": "#a1d5ff",
+      "type": "color"
+    },
+    "200": {
+      "value": "#8dcafc",
+      "type": "color"
+    },
+    "300": {
+      "value": "#71b9f5",
+      "type": "color"
+    },
+    "400": {
+      "value": "#5093e5",
+      "type": "color"
+    },
+    "500": {
+      "value": "#3870d1",
+      "type": "color"
+    },
+    "600": {
+      "value": "#2b59b5",
+      "type": "color"
+    },
+    "400-30": {
+      "value": "#5093e54d",
+      "type": "color"
+    },
+    "400-20": {
+      "value": "#5093e533",
+      "type": "color"
+    },
+    "400-10": {
+      "value": "#5093e51a",
+      "type": "color"
+    },
+    "400-0": {
+      "value": "#5093e500",
+      "type": "color"
+    },
+    "300-45": {
+      "value": "#71b9f573",
+      "type": "color"
+    },
+    "300-30": {
+      "value": "#71b9f54d",
+      "type": "color"
+    },
+    "300-15": {
+      "value": "#71b9f526",
+      "type": "color"
+    },
+    "300-0": {
+      "value": "#71b9f500",
+      "type": "color"
+    }
+  },
+  "green": {
+    "100": {
+      "value": "#a4ecb3",
+      "type": "color"
+    },
+    "200": {
+      "value": "#84e09a",
+      "type": "color"
+    },
+    "300": {
+      "value": "#68cc7f",
+      "type": "color"
+    },
+    "400": {
+      "value": "#40ad67",
+      "type": "color"
+    },
+    "500": {
+      "value": "#358761",
+      "type": "color"
+    },
+    "600": {
+      "value": "#327055",
+      "type": "color"
+    },
+    "400-30": {
+      "value": "#40ad674d",
+      "type": "color"
+    },
+    "400-20": {
+      "value": "#40ad6733",
+      "type": "color"
+    },
+    "400-10": {
+      "value": "#40ad671a",
+      "type": "color"
+    },
+    "400-0": {
+      "value": "#40ad6700",
+      "type": "color"
+    },
+    "300-45": {
+      "value": "#68cc7f73",
+      "type": "color"
+    },
+    "300-30": {
+      "value": "#68cc7f4d",
+      "type": "color"
+    },
+    "300-15": {
+      "value": "#68cc7f26",
+      "type": "color"
+    },
+    "300-0": {
+      "value": "#68cc7f00",
+      "type": "color"
+    }
+  },
+  "red": {
+    "100": {
+      "value": "#ffb8b8",
+      "type": "color"
+    },
+    "200": {
+      "value": "#ffa6a6",
+      "type": "color"
+    },
+    "300": {
+      "value": "#ff8c8c",
+      "type": "color"
+    },
+    "400": {
+      "value": "#e55c5c",
+      "type": "color"
+    },
+    "500": {
+      "value": "#bc3a42",
+      "type": "color"
+    },
+    "600": {
+      "value": "#992c34",
+      "type": "color"
+    },
+    "400-30": {
+      "value": "#e55c5c4d",
+      "type": "color"
+    },
+    "400-20": {
+      "value": "#e55c5c33",
+      "type": "color"
+    },
+    "400-10": {
+      "value": "#e55c5c1a",
+      "type": "color"
+    },
+    "400-0": {
+      "value": "#e55c5c00",
+      "type": "color"
+    },
+    "300-45": {
+      "value": "#ff8c8c73",
+      "type": "color"
+    },
+    "300-30": {
+      "value": "#ff8c8c4d",
+      "type": "color"
+    },
+    "300-15": {
+      "value": "#ff8c8c26",
+      "type": "color"
+    },
+    "300-0": {
+      "value": "#ff8c8c00",
+      "type": "color"
+    }
+  },
+  "black": {
+    "0": {
+      "value": "#00000000",
+      "type": "color"
+    },
+    "3": {
+      "value": "#00000008",
+      "type": "color"
+    },
+    "5": {
+      "value": "#0000000d",
+      "type": "color"
+    },
+    "8": {
+      "value": "#00000014",
+      "type": "color"
+    },
+    "15": {
+      "value": "#00000026",
+      "type": "color"
+    },
+    "20": {
+      "value": "#00000033",
+      "type": "color"
+    },
+    "22": {
+      "value": "#00000038",
+      "type": "color"
+    },
+    "30": {
+      "value": "#0000004d",
+      "type": "color"
+    },
+    "40": {
+      "value": "#00000066",
+      "type": "color"
+    },
+    "50": {
+      "value": "#00000080",
+      "type": "color"
+    },
+    "60": {
+      "value": "#00000099",
+      "type": "color"
+    },
+    "70": {
+      "value": "#000000b3",
+      "type": "color"
+    },
+    "85": {
+      "value": "#000000d9",
+      "type": "color"
+    },
+    "100": {
+      "value": "#000000",
+      "type": "color"
+    }
+  },
+  "white": {
+    "0": {
+      "value": "#ffffff00",
+      "type": "color"
+    },
+    "5": {
+      "value": "#ffffff0d",
+      "type": "color"
+    },
+    "8": {
+      "value": "#ffffff14",
+      "type": "color"
+    },
+    "12": {
+      "value": "#ffffff1f",
+      "type": "color"
+    },
+    "20": {
+      "value": "#ffffff33",
+      "type": "color"
+    },
+    "40": {
+      "value": "#ffffff66",
+      "type": "color"
+    },
+    "60": {
+      "value": "#ffffff99",
+      "type": "color"
+    },
+    "80": {
+      "value": "#ffffffcc",
+      "type": "color"
+    },
+    "90": {
+      "value": "#ffffffe6",
+      "type": "color"
+    },
+    "100": {
+      "value": "#ffffff",
+      "type": "color"
+    }
+  },
+  "orange": {
+    "100": {
+      "value": "#ffc38f",
+      "type": "color"
+    },
+    "200": {
+      "value": "#ffb070",
+      "type": "color"
+    },
+    "300": {
+      "value": "#ffa15e",
+      "type": "color"
+    },
+    "400": {
+      "value": "#e67f2b",
+      "type": "color"
+    },
+    "500": {
+      "value": "#c1630d",
+      "type": "color"
+    },
+    "600": {
+      "value": "#a1540c",
+      "type": "color"
+    },
+    "400-30": {
+      "value": "#e67f2b4d",
+      "type": "color"
+    },
+    "400-20": {
+      "value": "#e67f2b33",
+      "type": "color"
+    },
+    "400-10": {
+      "value": "#e67f2b1a",
+      "type": "color"
+    },
+    "400-0": {
+      "value": "#e67f2b00",
+      "type": "color"
+    },
+    "300-45": {
+      "value": "#ffa15e73",
+      "type": "color"
+    },
+    "300-30": {
+      "value": "#ffa15e4d",
+      "type": "color"
+    },
+    "300-15": {
+      "value": "#ffa15e26",
+      "type": "color"
+    },
+    "300-0": {
+      "value": "#ffa15e00",
+      "type": "color"
+    }
+  },
+  "yellow": {
+    "100": {
+      "value": "#ffe38f",
+      "type": "color"
+    },
+    "200": {
+      "value": "#fed968",
+      "type": "color"
+    },
+    "300": {
+      "value": "#f9c835",
+      "type": "color"
+    },
+    "400": {
+      "value": "#edae0d",
+      "type": "color"
+    },
+    "500": {
+      "value": "#c38f00",
+      "type": "color"
+    },
+    "600": {
+      "value": "#9e7504",
+      "type": "color"
+    },
+    "400-30": {
+      "value": "#edae0d4d",
+      "type": "color"
+    },
+    "400-20": {
+      "value": "#edae0d33",
+      "type": "color"
+    },
+    "400-10": {
+      "value": "#edae0d1a",
+      "type": "color"
+    },
+    "400-0": {
+      "value": "#edae0d00",
+      "type": "color"
+    },
+    "300-45": {
+      "value": "#f9c83573",
+      "type": "color"
+    },
+    "300-30": {
+      "value": "#f9c8354d",
+      "type": "color"
+    },
+    "300-15": {
+      "value": "#f9c83526",
+      "type": "color"
+    },
+    "300-0": {
+      "value": "#f9c83500",
+      "type": "color"
+    }
+  },
+  "pink": {
+    "100": {
+      "value": "#ffafef",
+      "type": "color"
+    },
+    "200": {
+      "value": "#f896e5",
+      "type": "color"
+    },
+    "300": {
+      "value": "#ec6fd3",
+      "type": "color"
+    },
+    "400": {
+      "value": "#d64bb5",
+      "type": "color"
+    },
+    "500": {
+      "value": "#b0369e",
+      "type": "color"
+    },
+    "600": {
+      "value": "#962c86",
+      "type": "color"
+    },
+    "400-30": {
+      "value": "#d64bb54d",
+      "type": "color"
+    },
+    "400-20": {
+      "value": "#d64bb533",
+      "type": "color"
+    },
+    "400-10": {
+      "value": "#d64bb51a",
+      "type": "color"
+    },
+    "400-0": {
+      "value": "#d64bb500",
+      "type": "color"
+    },
+    "300-45": {
+      "value": "#ec6fd373",
+      "type": "color"
+    },
+    "300-30": {
+      "value": "#ec6fd34d",
+      "type": "color"
+    },
+    "300-15": {
+      "value": "#ec6fd326",
+      "type": "color"
+    },
+    "300-0": {
+      "value": "#ec6fd300",
+      "type": "color"
+    }
+  },
+  "purple": {
+    "100": {
+      "value": "#d1b5ff",
+      "type": "color"
+    },
+    "200": {
+      "value": "#c19aff",
+      "type": "color"
+    },
+    "300": {
+      "value": "#b184ff",
+      "type": "color"
+    },
+    "400": {
+      "value": "#8e57e7",
+      "type": "color"
+    },
+    "500": {
+      "value": "#6735b6",
+      "type": "color"
+    },
+    "600": {
+      "value": "#54278f",
+      "type": "color"
+    },
+    "400-30": {
+      "value": "#8e57e74d",
+      "type": "color"
+    },
+    "400-20": {
+      "value": "#8e57e733",
+      "type": "color"
+    },
+    "400-10": {
+      "value": "#8e57e71a",
+      "type": "color"
+    },
+    "400-0": {
+      "value": "#8e57e700",
+      "type": "color"
+    },
+    "300-45": {
+      "value": "#b184ff73",
+      "type": "color"
+    },
+    "300-30": {
+      "value": "#b184ff4d",
+      "type": "color"
+    },
+    "300-15": {
+      "value": "#b184ff26",
+      "type": "color"
+    },
+    "300-0": {
+      "value": "#b184ff00",
+      "type": "color"
+    }
+  },
+  "navy": {
+    "100": {
+      "value": "#a5b2ee",
+      "type": "color"
+    },
+    "200": {
+      "value": "#8b99d9",
+      "type": "color"
+    },
+    "300": {
+      "value": "#7683d3",
+      "type": "color"
+    },
+    "400": {
+      "value": "#424fab",
+      "type": "color"
+    },
+    "500": {
+      "value": "#353888",
+      "type": "color"
+    },
+    "600": {
+      "value": "#22245b",
+      "type": "color"
+    },
+    "400-30": {
+      "value": "#424fab4d",
+      "type": "color"
+    },
+    "400-20": {
+      "value": "#424fab33",
+      "type": "color"
+    },
+    "400-10": {
+      "value": "#424fab1a",
+      "type": "color"
+    },
+    "400-0": {
+      "value": "#424fab00",
+      "type": "color"
+    },
+    "300-45": {
+      "value": "#7683d373",
+      "type": "color"
+    },
+    "300-30": {
+      "value": "#7683d34d",
+      "type": "color"
+    },
+    "300-15": {
+      "value": "#7683d326",
+      "type": "color"
+    },
+    "300-0": {
+      "value": "#7683d300",
+      "type": "color"
+    }
+  },
+  "teal": {
+    "100": {
+      "value": "#9beee6",
+      "type": "color"
+    },
+    "200": {
+      "value": "#72e0d5",
+      "type": "color"
+    },
+    "300": {
+      "value": "#40d3c5",
+      "type": "color"
+    },
+    "400": {
+      "value": "#09b2ac",
+      "type": "color"
+    },
+    "500": {
+      "value": "#068e95",
+      "type": "color"
+    },
+    "600": {
+      "value": "#06687d",
+      "type": "color"
+    },
+    "400-30": {
+      "value": "#09b2ac4d",
+      "type": "color"
+    },
+    "400-20": {
+      "value": "#09b2ac33",
+      "type": "color"
+    },
+    "400-10": {
+      "value": "#09b2ac1a",
+      "type": "color"
+    },
+    "400-0": {
+      "value": "#09b2ac00",
+      "type": "color"
+    },
+    "300-45": {
+      "value": "#40d3c573",
+      "type": "color"
+    },
+    "300-30": {
+      "value": "#40d3c54d",
+      "type": "color"
+    },
+    "300-15": {
+      "value": "#40d3c526",
+      "type": "color"
+    },
+    "300-0": {
+      "value": "#40d3c500",
+      "type": "color"
+    }
+  },
+  "olive": {
+    "100": {
+      "value": "#e7f17c",
+      "type": "color"
+    },
+    "200": {
+      "value": "#dbe56e",
+      "type": "color"
+    },
+    "300": {
+      "value": "#c8d630",
+      "type": "color"
+    },
+    "400": {
+      "value": "#a9b110",
+      "type": "color"
+    },
+    "500": {
+      "value": "#7b801c",
+      "type": "color"
+    },
+    "600": {
+      "value": "#65691c",
+      "type": "color"
+    },
+    "400-30": {
+      "value": "#a9b1104d",
+      "type": "color"
+    },
+    "400-20": {
+      "value": "#a9b11033",
+      "type": "color"
+    },
+    "400-10": {
+      "value": "#a9b1101a",
+      "type": "color"
+    },
+    "400-0": {
+      "value": "#a9b11000",
+      "type": "color"
+    },
+    "300-45": {
+      "value": "#c8d63073",
+      "type": "color"
+    },
+    "300-30": {
+      "value": "#c8d6304d",
+      "type": "color"
+    },
+    "300-15": {
+      "value": "#c8d63026",
+      "type": "color"
+    },
+    "300-0": {
+      "value": "#c8d63000",
+      "type": "color"
+    }
+  },
+  "grey": {
+    "50": {
+      "value": "#fcfcfc",
+      "type": "color"
+    },
+    "100": {
+      "value": "#f7f7f8",
+      "type": "color"
+    },
+    "200": {
+      "value": "#efeff0",
+      "type": "color"
+    },
+    "300": {
+      "value": "#e2e2e4",
+      "type": "color"
+    },
+    "400": {
+      "value": "#cfcfd1",
+      "type": "color"
+    },
+    "500": {
+      "value": "#a7a7aa",
+      "type": "color"
+    },
+    "600": {
+      "value": "#7b7b7b",
+      "type": "color"
+    },
+    "700": {
+      "value": "#464748",
+      "type": "color"
+    },
+    "800": {
+      "value": "#313234",
+      "type": "color"
+    },
+    "850": {
+      "value": "#2a2b2d",
+      "type": "color"
+    },
+    "900": {
+      "value": "#242428",
+      "type": "color"
+    },
+    "900-0": {
+      "value": "#24242800",
+      "type": "color"
+    }
+  },
+  "grey-alpha": {
+    "900-90": {
+      "value": "#242428e6",
+      "type": "color"
+    },
+    "850-80": {
+      "value": "#2a2b2dcc",
+      "type": "color"
+    },
+    "800-80": {
+      "value": "#313234cc",
+      "type": "color"
+    },
+    "700-80": {
+      "value": "#464748cc",
+      "type": "color"
+    },
+    "200-80": {
+      "value": "#efeff0cc",
+      "type": "color"
+    },
+    "100-80": {
+      "value": "#f7f7f8cc",
+      "type": "color"
+    },
+    "50-80": {
+      "value": "#fcfcfccc",
+      "type": "color"
+    },
+    "100-90": {
+      "value": "#f7f7f8e6",
+      "type": "color"
+    },
+    "800-90": {
+      "value": "#313234e6",
+      "type": "color"
+    }
+  },
+  "shade-blue": {
+    "400": {
+      "value": "#7175e0",
+      "type": "color"
+    },
+    "600": {
+      "value": "#4c5289",
+      "type": "color"
+    },
+    "400-20": {
+      "value": "#7175e033",
+      "type": "color"
+    },
+    "600-40": {
+      "value": "#4c528966",
+      "type": "color"
+    }
+  },
+  "shade-cobalt": {
+    "400": {
+      "value": "#57ace8",
+      "type": "color"
+    },
+    "600": {
+      "value": "#4a6185",
+      "type": "color"
+    },
+    "400-20": {
+      "value": "#57ace833",
+      "type": "color"
+    },
+    "600-40": {
+      "value": "#4a618566",
+      "type": "color"
+    }
+  },
+  "shade-teal": {
+    "400": {
+      "value": "#55aaa7",
+      "type": "color"
+    },
+    "600": {
+      "value": "#47737d",
+      "type": "color"
+    },
+    "400-20": {
+      "value": "#55aaa733",
+      "type": "color"
+    },
+    "600-40": {
+      "value": "#47737d66",
+      "type": "color"
+    }
+  },
+  "shade-red": {
+    "400": {
+      "value": "#de6870",
+      "type": "color"
+    },
+    "600": {
+      "value": "#904248",
+      "type": "color"
+    },
+    "400-20": {
+      "value": "#de687033",
+      "type": "color"
+    },
+    "600-40": {
+      "value": "#90424866",
+      "type": "color"
+    }
+  },
+  "shade-green": {
+    "400": {
+      "value": "#62af7c",
+      "type": "color"
+    },
+    "600": {
+      "value": "#4c7a5e",
+      "type": "color"
+    },
+    "400-20": {
+      "value": "#62af7c33",
+      "type": "color"
+    },
+    "600-40": {
+      "value": "#4c7a5e66",
+      "type": "color"
+    }
+  },
+  "shade-olive": {
+    "400": {
+      "value": "#a5a953",
+      "type": "color"
+    },
+    "600": {
+      "value": "#737638",
+      "type": "color"
+    },
+    "400-20": {
+      "value": "#a5a95333",
+      "type": "color"
+    },
+    "600-40": {
+      "value": "#73763866",
+      "type": "color"
+    }
+  },
+  "shade-yellow": {
+    "400": {
+      "value": "#e8ae3c",
+      "type": "color"
+    },
+    "600": {
+      "value": "#7d6a26",
+      "type": "color"
+    },
+    "400-20": {
+      "value": "#e8ae3c33",
+      "type": "color"
+    },
+    "600-40": {
+      "value": "#7d6a2666",
+      "type": "color"
+    }
+  },
+  "shade-orange": {
+    "400": {
+      "value": "#e08c48",
+      "type": "color"
+    },
+    "600": {
+      "value": "#895a34",
+      "type": "color"
+    },
+    "400-20": {
+      "value": "#e08c4833",
+      "type": "color"
+    },
+    "600-40": {
+      "value": "#895a3466",
+      "type": "color"
+    }
+  },
+  "shade-pink": {
+    "400": {
+      "value": "#d369ba",
+      "type": "color"
+    },
+    "600": {
+      "value": "#854075",
+      "type": "color"
+    },
+    "400-20": {
+      "value": "#d369ba33",
+      "type": "color"
+    },
+    "600-40": {
+      "value": "#85407566",
+      "type": "color"
+    }
+  },
+  "shade-purple": {
+    "400": {
+      "value": "#9d6fe5",
+      "type": "color"
+    },
+    "600": {
+      "value": "#5b467d",
+      "type": "color"
+    },
+    "400-20": {
+      "value": "#9d6fe533",
+      "type": "color"
+    },
+    "600-40": {
+      "value": "#5b467d66",
+      "type": "color"
+    }
+  },
+  "shade-navy": {
+    "400": {
+      "value": "#5f69b0",
+      "type": "color"
+    },
+    "600": {
+      "value": "#373b56",
+      "type": "color"
+    },
+    "400-20": {
+      "value": "#5f69b033",
+      "type": "color"
+    },
+    "600-40": {
+      "value": "#373b5666",
+      "type": "color"
     }
   }
 }
diff --git a/packages/bezier-tokens/src/alpha/global/gradient.json b/packages/bezier-tokens/src/alpha/global/gradient.json
index d6eb73d5ce..14fd91f2df 100644
--- a/packages/bezier-tokens/src/alpha/global/gradient.json
+++ b/packages/bezier-tokens/src/alpha/global/gradient.json
@@ -4,11 +4,11 @@
       "purple": {
         "value": [
           {
-            "color": "{color.purple.300}",
+            "color": "{purple.300}",
             "position": "50%"
           },
           {
-            "color": "{color.pink.200}",
+            "color": "{pink.200}",
             "position": "100%"
           }
         ],
@@ -17,11 +17,11 @@
       "orange": {
         "value": [
           {
-            "color": "{color.orange.300}",
+            "color": "{orange.300}",
             "position": "50%"
           },
           {
-            "color": "{color.yellow.200}",
+            "color": "{yellow.200}",
             "position": "100%"
           }
         ],
@@ -30,11 +30,11 @@
       "green": {
         "value": [
           {
-            "color": "{color.green.300}",
+            "color": "{green.300}",
             "position": "50%"
           },
           {
-            "color": "{color.teal.200}",
+            "color": "{teal.200}",
             "position": "100%"
           }
         ],
@@ -43,11 +43,11 @@
       "blue": {
         "value": [
           {
-            "color": "{color.blue.300}",
+            "color": "{blue.300}",
             "position": "50%"
           },
           {
-            "color": "{color.green.200}",
+            "color": "{green.200}",
             "position": "100%"
           }
         ],
@@ -58,11 +58,11 @@
       "green": {
         "value": [
           {
-            "color": "{color.green.400}",
+            "color": "{green.400}",
             "position": "0%"
           },
           {
-            "color": "{color.green.300}",
+            "color": "{green.300}",
             "position": "100%"
           }
         ],
diff --git a/packages/bezier-tokens/src/alpha/semantic/color.json b/packages/bezier-tokens/src/alpha/semantic/color.json
index 07ceb3a0c4..26a4c15807 100644
--- a/packages/bezier-tokens/src/alpha/semantic/color.json
+++ b/packages/bezier-tokens/src/alpha/semantic/color.json
@@ -1,193 +1,191 @@
 {
-  "color": {
-    "primary": {
-      "bg": {
-        "normal": {
-          "value": "{color.bg.blue.normal}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.bg.blue.light}",
-          "type": "color"
-        },
-        "lighter": {
-          "value": "{color.bg.blue.lighter}",
-          "type": "color"
-        },
-        "lightest": {
-          "value": "{color.bg.blue.lightest}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.bg.blue.dark}",
-          "type": "color"
-        }
-      },
-      "fg": {
-        "normal": {
-          "value": "{color.fg.blue.normal}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.fg.blue.light}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.fg.blue.dark}",
-          "type": "color"
-        }
+  "primary": {
+    "bg": {
+      "normal": {
+        "value": "{bg.blue.normal}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{bg.blue.light}",
+        "type": "color"
+      },
+      "lighter": {
+        "value": "{bg.blue.lighter}",
+        "type": "color"
+      },
+      "lightest": {
+        "value": "{bg.blue.lightest}",
+        "type": "color"
+      },
+      "dark": {
+        "value": "{bg.blue.dark}",
+        "type": "color"
+      }
+    },
+    "fg": {
+      "normal": {
+        "value": "{fg.blue.normal}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{fg.blue.light}",
+        "type": "color"
+      },
+      "dark": {
+        "value": "{fg.blue.dark}",
+        "type": "color"
+      }
+    }
+  },
+  "critical": {
+    "bg": {
+      "dark": {
+        "value": "{bg.red.dark}",
+        "type": "color"
+      },
+      "normal": {
+        "value": "{fg.red.normal}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{bg.red.light}",
+        "type": "color"
+      },
+      "lighter": {
+        "value": "{bg.red.lighter}",
+        "type": "color"
+      },
+      "lightest": {
+        "value": "{bg.red.lightest}",
+        "type": "color"
       }
     },
-    "critical": {
-      "bg": {
-        "dark": {
-          "value": "{color.bg.red.dark}",
-          "type": "color"
-        },
-        "normal": {
-          "value": "{color.fg.red.normal}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.bg.red.light}",
-          "type": "color"
-        },
-        "lighter": {
-          "value": "{color.bg.red.lighter}",
-          "type": "color"
-        },
-        "lightest": {
-          "value": "{color.bg.red.lightest}",
-          "type": "color"
-        }
-      },
-      "fg": {
-        "normal": {
-          "value": "{color.fg.red.normal}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.fg.red.light}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.fg.red.dark}",
-          "type": "color"
-        }
+    "fg": {
+      "normal": {
+        "value": "{fg.red.normal}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{fg.red.light}",
+        "type": "color"
+      },
+      "dark": {
+        "value": "{fg.red.dark}",
+        "type": "color"
+      }
+    }
+  },
+  "warning": {
+    "bg": {
+      "dark": {
+        "value": "{bg.orange.dark}",
+        "type": "color"
+      },
+      "normal": {
+        "value": "{bg.orange.normal}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{bg.orange.light}",
+        "type": "color"
+      },
+      "lighter": {
+        "value": "{bg.orange.lighter}",
+        "type": "color"
+      },
+      "lightest": {
+        "value": "{bg.orange.lightest}",
+        "type": "color"
       }
     },
-    "warning": {
-      "bg": {
-        "dark": {
-          "value": "{color.bg.orange.dark}",
-          "type": "color"
-        },
-        "normal": {
-          "value": "{color.bg.orange.normal}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.bg.orange.light}",
-          "type": "color"
-        },
-        "lighter": {
-          "value": "{color.bg.orange.lighter}",
-          "type": "color"
-        },
-        "lightest": {
-          "value": "{color.bg.orange.lightest}",
-          "type": "color"
-        }
-      },
-      "fg": {
-        "normal": {
-          "value": "{color.fg.orange.normal}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.fg.orange.light}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.fg.orange.dark}",
-          "type": "color"
-        }
+    "fg": {
+      "normal": {
+        "value": "{fg.orange.normal}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{fg.orange.light}",
+        "type": "color"
+      },
+      "dark": {
+        "value": "{fg.orange.dark}",
+        "type": "color"
+      }
+    }
+  },
+  "accent": {
+    "bg": {
+      "dark": {
+        "value": "{bg.cobalt.dark}",
+        "type": "color"
+      },
+      "normal": {
+        "value": "{bg.cobalt.normal}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{bg.cobalt.light}",
+        "type": "color"
+      },
+      "lighter": {
+        "value": "{bg.cobalt.lighter}",
+        "type": "color"
+      },
+      "lightest": {
+        "value": "{bg.cobalt.lightest}",
+        "type": "color"
       }
     },
-    "accent": {
-      "bg": {
-        "dark": {
-          "value": "{color.bg.cobalt.dark}",
-          "type": "color"
-        },
-        "normal": {
-          "value": "{color.bg.cobalt.normal}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.bg.cobalt.light}",
-          "type": "color"
-        },
-        "lighter": {
-          "value": "{color.bg.cobalt.lighter}",
-          "type": "color"
-        },
-        "lightest": {
-          "value": "{color.bg.cobalt.lightest}",
-          "type": "color"
-        }
-      },
-      "fg": {
-        "normal": {
-          "value": "{color.fg.cobalt.normal}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.fg.cobalt.light}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.fg.cobalt.dark}",
-          "type": "color"
-        }
+    "fg": {
+      "normal": {
+        "value": "{fg.cobalt.normal}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{fg.cobalt.light}",
+        "type": "color"
+      },
+      "dark": {
+        "value": "{fg.cobalt.dark}",
+        "type": "color"
+      }
+    }
+  },
+  "success": {
+    "bg": {
+      "dark": {
+        "value": "{bg.green.dark}",
+        "type": "color"
+      },
+      "normal": {
+        "value": "{bg.green.normal}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{bg.green.light}",
+        "type": "color"
+      },
+      "lighter": {
+        "value": "{bg.green.lighter}",
+        "type": "color"
+      },
+      "lightest": {
+        "value": "{bg.green.lightest}",
+        "type": "color"
       }
     },
-    "success": {
-      "bg": {
-        "dark": {
-          "value": "{color.bg.green.dark}",
-          "type": "color"
-        },
-        "normal": {
-          "value": "{color.bg.green.normal}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.bg.green.light}",
-          "type": "color"
-        },
-        "lighter": {
-          "value": "{color.bg.green.lighter}",
-          "type": "color"
-        },
-        "lightest": {
-          "value": "{color.bg.green.lightest}",
-          "type": "color"
-        }
-      },
-      "fg": {
-        "normal": {
-          "value": "{color.fg.green.normal}",
-          "type": "color"
-        },
-        "light": {
-          "value": "{color.fg.green.light}",
-          "type": "color"
-        },
-        "dark": {
-          "value": "{color.fg.green.dark}",
-          "type": "color"
-        }
+    "fg": {
+      "normal": {
+        "value": "{fg.green.normal}",
+        "type": "color"
+      },
+      "light": {
+        "value": "{fg.green.light}",
+        "type": "color"
+      },
+      "dark": {
+        "value": "{fg.green.dark}",
+        "type": "color"
       }
     }
   }
diff --git a/packages/bezier-tokens/src/alpha/semantic/shadow.json b/packages/bezier-tokens/src/alpha/semantic/shadow.json
index 4f2a4c3425..7c3948aaed 100644
--- a/packages/bezier-tokens/src/alpha/semantic/shadow.json
+++ b/packages/bezier-tokens/src/alpha/semantic/shadow.json
@@ -2,7 +2,7 @@
   "shadow": {
     "error": {
       "value": {
-        "color": "{color.warning.bg.normal}",
+        "color": "{warning.bg.normal}",
         "type": "dropShadow",
         "x": "0px",
         "y": "0px",
@@ -13,7 +13,7 @@
     },
     "active": {
       "value": {
-        "color": "{color.primary.bg.normal}",
+        "color": "{primary.bg.normal}",
         "type": "dropShadow",
         "x": "0px",
         "y": "0px",
@@ -26,7 +26,7 @@
       "default": {
         "value": [
           {
-            "color": "{color.shadow.medium}",
+            "color": "{shadow.medium}",
             "type": "innerShadow",
             "x": "0px",
             "y": "0px",
@@ -34,7 +34,7 @@
             "spread": "1px"
           },
           {
-            "color": "{color.shadow.base}",
+            "color": "{shadow.base}",
             "type": "dropShadow",
             "x": "0px",
             "y": "1px",
@@ -47,7 +47,7 @@
       "hover": {
         "value": [
           {
-            "color": "{color.primary.bg.normal}",
+            "color": "{primary.bg.normal}",
             "type": "innerShadow",
             "x": "0px",
             "y": "0px",
@@ -55,7 +55,7 @@
             "spread": "1px"
           },
           {
-            "color": "{color.shadow.base}",
+            "color": "{shadow.base}",
             "type": "dropShadow",
             "x": "0px",
             "y": "2px",
@@ -68,7 +68,7 @@
       "active": {
         "value": [
           {
-            "color": "{color.primary.bg.normal}",
+            "color": "{primary.bg.normal}",
             "type": "innerShadow",
             "x": "0px",
             "y": "0px",
@@ -76,7 +76,7 @@
             "spread": "1px"
           },
           {
-            "color": "{color.primary.bg.light}",
+            "color": "{primary.bg.light}",
             "type": "dropShadow",
             "x": "0px",
             "y": "0px",
@@ -84,7 +84,7 @@
             "spread": "3px"
           },
           {
-            "color": "{color.shadow.base}",
+            "color": "{shadow.base}",
             "type": "dropShadow",
             "x": "0px",
             "y": "2px",
@@ -97,7 +97,7 @@
       "error": {
         "value": [
           {
-            "color": "{color.warning.bg.normal}",
+            "color": "{warning.bg.normal}",
             "type": "innerShadow",
             "x": "0px",
             "y": "0px",
@@ -105,7 +105,7 @@
             "spread": "1px"
           },
           {
-            "color": "{color.warning.bg.light}",
+            "color": "{warning.bg.light}",
             "type": "dropShadow",
             "x": "0px",
             "y": "0px",
@@ -113,7 +113,7 @@
             "spread": "3px"
           },
           {
-            "color": "{color.shadow.base}",
+            "color": "{shadow.base}",
             "type": "dropShadow",
             "x": "0px",
             "y": "2px",

From 702af8629171d29c63298805ec69b3d975e022c2 Mon Sep 17 00:00:00 2001
From: Ed Sungik Choi <sungik.dev@gmail.com>
Date: Tue, 7 Jan 2025 13:43:31 +0900
Subject: [PATCH 2/9] feat(bezier-react): remove color category prefix from
 alpha color tokens

---
 .../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 +-
 .../ToggleButton.module.scss                  | 20 ++---
 .../ToggleEmojiButtonGroup.module.scss        | 14 +--
 .../bezier-react/src/stories/alpha-color.mdx  | 14 +--
 .../bezier-react/src/stories/alpha-shadow.mdx | 14 +--
 .../bezier-react/src/types/alpha-tokens.ts    |  7 +-
 11 files changed, 188 insertions(+), 193 deletions(-)

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/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/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/types/alpha-tokens.ts b/packages/bezier-react/src/types/alpha-tokens.ts
index 4ea4938fac..3f22b57f95 100644
--- a/packages/bezier-react/src/types/alpha-tokens.ts
+++ b/packages/bezier-react/src/types/alpha-tokens.ts
@@ -22,16 +22,13 @@ export type FlattenSemanticToken = ExtractKeys<
 >
 export type FlattenAllToken = FlattenGlobalToken | FlattenSemanticToken
 
-export type GlobalColor = RemovePrefix<
-  'alpha-color',
-  keyof GlobalToken['color']
->
+export type GlobalColor = RemovePrefix<'alpha', keyof GlobalToken['color']>
 
 /**
  * Functional & Semantic color tokens
  */
 export type BaseSemanticColor = RemovePrefix<
-  'alpha-color',
+  'alpha',
   keyof SemanticToken['color']
 >
 

From 6f20289e88697cb9275e8043c596931dea8830cc Mon Sep 17 00:00:00 2001
From: Ed Sungik Choi <sungik.dev@gmail.com>
Date: Tue, 7 Jan 2025 13:57:38 +0900
Subject: [PATCH 3/9] feat(bezier-react): enhanced `style.ts` to support legacy
 to alpha color token conversion

---
 .../bezier-react/src/types/alpha-tokens.ts    |  27 ++--
 packages/bezier-react/src/utils/style.ts      | 138 +++++++++++++++++-
 2 files changed, 144 insertions(+), 21 deletions(-)

diff --git a/packages/bezier-react/src/types/alpha-tokens.ts b/packages/bezier-react/src/types/alpha-tokens.ts
index 3f22b57f95..d23ff92a9b 100644
--- a/packages/bezier-react/src/types/alpha-tokens.ts
+++ b/packages/bezier-react/src/types/alpha-tokens.ts
@@ -10,9 +10,6 @@ import {
 export type ThemeName = 'light' | 'dark'
 
 export type GlobalToken = typeof tokens.global
-/**
- * FIXME: Separate functional and semantic tokens?
- */
 export type SemanticToken = typeof tokens.lightTheme | typeof tokens.darkTheme
 
 // NOTE: (@ed) Do not remove alpha- prefix to match CSS variable names
@@ -24,31 +21,33 @@ export type FlattenAllToken = FlattenGlobalToken | FlattenSemanticToken
 
 export type GlobalColor = RemovePrefix<'alpha', keyof GlobalToken['color']>
 
-/**
- * Functional & Semantic color tokens
- */
-export type BaseSemanticColor = RemovePrefix<
+export type FunctionalAndSemanticColor = RemovePrefix<
   'alpha',
   keyof SemanticToken['color']
 >
 
+export type Color = GlobalColor | FunctionalAndSemanticColor
+
 export type BackgroundFunctionalColor = StartsWithPrefix<
   'bg',
-  BaseSemanticColor
+  FunctionalAndSemanticColor
 >
 export type ForegroundFunctionalColor = StartsWithPrefix<
   'fg',
-  BaseSemanticColor
+  FunctionalAndSemanticColor
 >
 export type SurfaceFunctionalColor = StartsWithPrefix<
   'surface',
-  BaseSemanticColor
+  FunctionalAndSemanticColor
 >
 export type ShadowFunctionalColor = StartsWithPrefix<
   'shadow',
-  BaseSemanticColor
+  FunctionalAndSemanticColor
+>
+export type DimFunctionalColor = StartsWithPrefix<
+  'dim',
+  FunctionalAndSemanticColor
 >
-export type DimFunctionalColor = StartsWithPrefix<'dim', BaseSemanticColor>
 
 export type FunctionalColor =
   | BackgroundFunctionalColor
@@ -59,11 +58,9 @@ export type FunctionalColor =
 
 export type SemanticColor = StartsWithPrefix<
   'primary' | 'critical' | 'warning' | 'accent' | 'success',
-  BaseSemanticColor
+  FunctionalAndSemanticColor
 >
 
-export type Color = GlobalColor | FunctionalColor | SemanticColor
-
 export type Radius = RemovePrefix<'alpha-radius', keyof GlobalToken['radius']>
 export type Opacity = RemovePrefix<
   'alpha-opacity',
diff --git a/packages/bezier-react/src/utils/style.ts b/packages/bezier-react/src/utils/style.ts
index 705e0f367c..ee066ce0d6 100644
--- a/packages/bezier-react/src/utils/style.ts
+++ b/packages/bezier-react/src/utils/style.ts
@@ -1,4 +1,12 @@
-import { type FlattenAllToken } from '~/src/types/tokens'
+import {
+  type Color,
+  type FunctionalAndSemanticColor,
+} from '~/src/types/alpha-tokens'
+import {
+  type FlattenAllToken,
+  type GlobalColor,
+  type SemanticColor,
+} from '~/src/types/tokens'
 import { isNil, isString } from '~/src/utils/type'
 
 /**
@@ -38,21 +46,139 @@ 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>(
-  propertyName: PropertyName
+export const tokenCssVar = cssVar as <
+  Token extends FlattenAllToken | undefined,
+>(
+  token: Token
+) => ReturnType<typeof cssVar<Token>>
+
+/**
+ * NOTE: (@ed) Converts a legacy color token to alpha color token.
+ * **Should be removed after the migration is complete.**
+ */
+function alphaColorTokenCssVar<ColorToken extends Color | undefined>(
+  colorToken: ColorToken
 ) {
-  return cssVar(propertyName)
+  return !isNil(colorToken)
+    ? (`var(--alpha-${colorToken})` 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 GlobalColor | SemanticColor | undefined,
+>(colorToken: ColorToken) {
+  return alphaColorTokenCssVar(
+    legacyToAlphaColorTokenMap[
+      colorToken as keyof typeof legacyToAlphaColorTokenMap
+    ] ?? colorToken
+  )
+}
+
+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',
+  'shdw-inner-base': 'shadow-base-inner',
+  'shdw-base': 'shadow-base',
+  'shdw-small': 'shadow-small',
+  'shdw-medium': 'shadow-medium',
+  'shdw-large': 'shadow-large',
+  'shdw-xlarge': 'shadow-xlarge',
+}) satisfies Partial<Record<SemanticColor, FunctionalAndSemanticColor>>
+
 /**
  * Formats a given URL string into a CSS `url()` function format.
  */

From f8e6d06900451488f712e94c41c4040336c4c767 Mon Sep 17 00:00:00 2001
From: Ed Sungik Choi <sungik.dev@gmail.com>
Date: Tue, 7 Jan 2025 13:58:27 +0900
Subject: [PATCH 4/9] feat(bezier-react): converts cssVar to colorTokenCssVar

---
 .../src/components/AlphaStatusBadge/StatusBadge.tsx      | 4 ++--
 packages/bezier-react/src/components/Icon/Icon.tsx       | 4 ++--
 .../src/components/SmoothCornersBox/SmoothCornersBox.tsx | 9 ++++++---
 packages/bezier-react/src/components/Spinner/Spinner.tsx | 4 ++--
 packages/bezier-react/src/components/Status/Status.tsx   | 4 ++--
 packages/bezier-react/src/components/Text/Text.tsx       | 4 ++--
 packages/bezier-react/src/types/props-helpers.ts         | 6 +++---
 7 files changed, 19 insertions(+), 16 deletions(-)

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/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/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),

From 787541532a8b5a6f3d778f353e3f13417893dbbe Mon Sep 17 00:00:00 2001
From: Ed Sungik Choi <sungik.dev@gmail.com>
Date: Tue, 7 Jan 2025 13:58:58 +0900
Subject: [PATCH 5/9] feat(bezier-react): apply alpha shadow tokens to
 elevation util classnames

---
 .../src/styles/components/elevation.module.scss            | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/bezier-react/src/styles/components/elevation.module.scss b/packages/bezier-react/src/styles/components/elevation.module.scss
index 2ae0f35247..26d8de174f 100644
--- a/packages/bezier-react/src/styles/components/elevation.module.scss
+++ b/packages/bezier-react/src/styles/components/elevation.module.scss
@@ -1,9 +1,10 @@
 @use 'sass:map';
-@use '../../../../../node_modules/@channel.io/bezier-tokens/dist/scss' as *;
+@use '../../../../../node_modules/@channel.io/bezier-tokens/dist/alpha/scss'
+  as *;
 
-@each $ev in map.keys(map.get($tokens, 'light-theme', 'ev')) {
+@each $ev in map.keys(map.get($tokens, 'light-theme', 'shadow')) {
   :where(.elevation-#{$ev}) {
     /* stylelint-disable-next-line bezier/validate-token */
-    box-shadow: var(--ev-#{$ev});
+    box-shadow: var(--alpha-shadow-#{$ev});
   }
 }

From bfb24f95f0989e7fd19aa846ef030e3e336716e0 Mon Sep 17 00:00:00 2001
From: Ed Sungik Choi <sungik.dev@gmail.com>
Date: Tue, 7 Jan 2025 15:04:29 +0900
Subject: [PATCH 6/9] feat(bezier-react): update ColorProps type to support
 alpha color tokens

---
 packages/bezier-react/src/types/props.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/bezier-react/src/types/props.ts b/packages/bezier-react/src/types/props.ts
index 86cb75e236..e65f5ff5ba 100644
--- a/packages/bezier-react/src/types/props.ts
+++ b/packages/bezier-react/src/types/props.ts
@@ -1,5 +1,6 @@
 import type { JSX } from 'react'
 
+import { type FunctionalAndSemanticColor } from './alpha-tokens'
 import type {
   BackgroundSemanticColor,
   BackgroundTextSemanticColor,
@@ -10,6 +11,8 @@ import type {
   ZIndex,
 } from './tokens'
 
+type LegacyAndAlphaSemanticColor = SemanticColor | FunctionalAndSemanticColor
+
 /**
  * Props for overriding default styles of components. Intended for exceptional use cases where default styles need customization.
  */
@@ -140,7 +143,7 @@ export interface ColorProps {
   /**
    * Color from the design system's semantic color.
    */
-  color?: SemanticColor
+  color?: LegacyAndAlphaSemanticColor
 }
 
 /**
@@ -179,7 +182,7 @@ export type AdditionalOverridableStyleProps<ElementName extends PropNameType> =
  * Props for adding color properties to named elements within a component.
  */
 export type AdditionalColorProps<ElementName extends PropNameType> =
-  AdditionalProps<ElementName, 'color', SemanticColor>
+  AdditionalProps<ElementName, 'color', LegacyAndAlphaSemanticColor>
 
 /**
  * Props for components that can be activated or deactivated.

From bcbc99fe39c9c3a14534cd9d37ad0c55d7bc51dc Mon Sep 17 00:00:00 2001
From: Ed Sungik Choi <sungik.dev@gmail.com>
Date: Tue, 7 Jan 2025 15:25:49 +0900
Subject: [PATCH 7/9] test(bezier-react): update snapshot & remove test cases
 related to color token css variables

---
 .../__snapshots__/Avatar.test.tsx.snap        | 16 +++++-----
 .../__snapshots__/AvatarGroup.test.tsx.snap   | 30 +++++++++----------
 .../Avatar/__snapshots__/Avatar.test.tsx.snap | 16 +++++-----
 .../__snapshots__/AvatarGroup.test.tsx.snap   | 30 +++++++++----------
 .../__snapshots__/FormControl.test.tsx.snap   | 24 +++++++--------
 .../FormHelperText.test.tsx.snap              |  4 +--
 .../__snapshots__/FormLabel.test.tsx.snap     |  2 +-
 .../Help/__snapshots__/Help.test.tsx.snap     |  2 +-
 .../src/components/Icon/Icon.test.tsx         | 11 -------
 .../__snapshots__/LegacyTooltip.test.tsx.snap |  2 +-
 .../src/components/NavGroup/NavGroup.test.tsx | 18 -----------
 .../__snapshots__/NavGroup.test.tsx.snap      |  8 ++---
 .../src/components/NavItem/NavItem.test.tsx   | 18 -----------
 .../__snapshots__/NavItem.test.tsx.snap       |  4 +--
 .../SmoothCornersBox.test.tsx                 |  6 ----
 .../src/components/Spinner/Spinner.test.tsx   |  7 -----
 16 files changed, 69 insertions(+), 129 deletions(-)

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)

From 0bfc318ebdb318b312468adc4cfb53662d528729 Mon Sep 17 00:00:00 2001
From: Ed Sungik Choi <sungik.dev@gmail.com>
Date: Tue, 7 Jan 2025 15:39:54 +0900
Subject: [PATCH 8/9] feat(bezier-react): update color prop type to support
 alpha color tokens

---
 .../bezier-react/src/components/Text/Text.types.ts     |  9 +++------
 packages/bezier-react/src/types/props.ts               |  6 ++++--
 packages/bezier-react/src/utils/style.ts               | 10 +++++-----
 3 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/packages/bezier-react/src/components/Text/Text.types.ts b/packages/bezier-react/src/components/Text/Text.types.ts
index 0634e0be6b..bffc620460 100644
--- a/packages/bezier-react/src/components/Text/Text.types.ts
+++ b/packages/bezier-react/src/components/Text/Text.types.ts
@@ -1,10 +1,10 @@
 import {
   type BezierComponentProps,
   type ChildrenProps,
+  type ColorProps,
   type MarginProps,
   type PolymorphicProps,
 } from '~/src/types/props'
-import { type SemanticColor } from '~/src/types/tokens'
 
 type Typography =
   | '11'
@@ -28,10 +28,6 @@ interface TextOwnProps {
    * @default '15'
    */
   typo?: Typography
-  /**
-   * Color of the text. If no value is specified, it inherits the color of the parent element.
-   */
-  color?: SemanticColor
   /**
    * Whether the text is bold.
    * @default false
@@ -55,8 +51,9 @@ interface TextOwnProps {
 }
 
 export interface TextProps
-  extends Omit<BezierComponentProps, keyof TextOwnProps>,
+  extends Omit<BezierComponentProps, keyof TextOwnProps | keyof ColorProps>,
     PolymorphicProps,
     ChildrenProps,
+    ColorProps,
     MarginProps,
     TextOwnProps {}
diff --git a/packages/bezier-react/src/types/props.ts b/packages/bezier-react/src/types/props.ts
index e65f5ff5ba..a8dcb7248e 100644
--- a/packages/bezier-react/src/types/props.ts
+++ b/packages/bezier-react/src/types/props.ts
@@ -1,6 +1,6 @@
 import type { JSX } from 'react'
 
-import { type FunctionalAndSemanticColor } from './alpha-tokens'
+import { type FunctionalAndSemanticColor as AlphaFunctionalAndSemanticColor } from './alpha-tokens'
 import type {
   BackgroundSemanticColor,
   BackgroundTextSemanticColor,
@@ -11,7 +11,9 @@ import type {
   ZIndex,
 } from './tokens'
 
-type LegacyAndAlphaSemanticColor = SemanticColor | FunctionalAndSemanticColor
+type LegacyAndAlphaSemanticColor =
+  | SemanticColor
+  | AlphaFunctionalAndSemanticColor
 
 /**
  * Props for overriding default styles of components. Intended for exceptional use cases where default styles need customization.
diff --git a/packages/bezier-react/src/utils/style.ts b/packages/bezier-react/src/utils/style.ts
index ee066ce0d6..15a3614dcd 100644
--- a/packages/bezier-react/src/utils/style.ts
+++ b/packages/bezier-react/src/utils/style.ts
@@ -1,6 +1,6 @@
 import {
-  type Color,
-  type FunctionalAndSemanticColor,
+  type Color as AlphaColor,
+  type FunctionalAndSemanticColor as AlphaFunctionalAndSemanticColor,
 } from '~/src/types/alpha-tokens'
 import {
   type FlattenAllToken,
@@ -63,7 +63,7 @@ export const tokenCssVar = cssVar as <
  * NOTE: (@ed) Converts a legacy color token to alpha color token.
  * **Should be removed after the migration is complete.**
  */
-function alphaColorTokenCssVar<ColorToken extends Color | undefined>(
+function alphaColorTokenCssVar<ColorToken extends AlphaColor | undefined>(
   colorToken: ColorToken
 ) {
   return !isNil(colorToken)
@@ -76,7 +76,7 @@ function alphaColorTokenCssVar<ColorToken extends Color | undefined>(
  * **Should be removed after the migration is complete.**
  */
 export function colorTokenCssVar<
-  ColorToken extends GlobalColor | SemanticColor | undefined,
+  ColorToken extends GlobalColor | SemanticColor | AlphaColor | undefined,
 >(colorToken: ColorToken) {
   return alphaColorTokenCssVar(
     legacyToAlphaColorTokenMap[
@@ -177,7 +177,7 @@ const legacyToAlphaColorTokenMap = Object.freeze({
   'shdw-medium': 'shadow-medium',
   'shdw-large': 'shadow-large',
   'shdw-xlarge': 'shadow-xlarge',
-}) satisfies Partial<Record<SemanticColor, FunctionalAndSemanticColor>>
+}) satisfies Partial<Record<SemanticColor, AlphaFunctionalAndSemanticColor>>
 
 /**
  * Formats a given URL string into a CSS `url()` function format.

From f3170c64b0aab495a41cd3ae19cecf3fcb9c8aa0 Mon Sep 17 00:00:00 2001
From: Ed Sungik Choi <sungik.dev@gmail.com>
Date: Tue, 7 Jan 2025 16:03:22 +0900
Subject: [PATCH 9/9] chore(changeset): add

---
 .changeset/old-bugs-kick.md  | 5 +++++
 .changeset/shy-toes-argue.md | 5 +++++
 2 files changed, 10 insertions(+)
 create mode 100644 .changeset/old-bugs-kick.md
 create mode 100644 .changeset/shy-toes-argue.md

diff --git a/.changeset/old-bugs-kick.md b/.changeset/old-bugs-kick.md
new file mode 100644
index 0000000000..0dc12ed53e
--- /dev/null
+++ b/.changeset/old-bugs-kick.md
@@ -0,0 +1,5 @@
+---
+'@channel.io/bezier-tokens': patch
+---
+
+Remove 'color-' prefix from alpha color tokens
diff --git a/.changeset/shy-toes-argue.md b/.changeset/shy-toes-argue.md
new file mode 100644
index 0000000000..3171eb0c76
--- /dev/null
+++ b/.changeset/shy-toes-argue.md
@@ -0,0 +1,5 @@
+---
+'@channel.io/bezier-react': major
+---
+
+Migrate to alpha version color tokens