channel-io · timok1m · Jan 9, 2026 · Dec 18, 2025 · Dec 18, 2025 · Dec 18, 2025
diff --git a/.changeset/young-nights-hide.md b/.changeset/young-nights-hide.md
@@ -0,0 +1,7 @@
+---
+'@channel.io/stylelint-bezier': minor
+'@channel.io/bezier-tokens': minor
+'@channel.io/bezier-react': minor
+---
+
+Add V3 bezier tokens and update bezier components allow to use V3 tokens.
diff --git a/packages/bezier-figma-plugin/CHANGELOG.md b/packages/bezier-figma-plugin/CHANGELOG.md
@@ -1,5 +1,91 @@
 # bezier-figma-plugin
 
+## 0.7.19-beta.11
+
+### Patch Changes
+
+- Updated dependencies
+  - @channel.io/bezier-react@3.5.2-beta.11
+
+## 0.7.19-beta.10
+
+### Patch Changes
+
+- Updated dependencies
+  - @channel.io/bezier-react@3.5.2-beta.10
+
+## 0.7.19-beta.9
+
+### Patch Changes
+
+- Updated dependencies
+  - @channel.io/bezier-react@3.5.2-beta.9
+
+## 0.7.19-beta.8
+
+### Patch Changes
+
+- Updated dependencies
+  - @channel.io/bezier-react@3.5.2-beta.8
+
+## 0.7.19-beta.7
+
+### Patch Changes
+
+- Updated dependencies
+  - @channel.io/bezier-react@3.5.2-beta.7
+
+## 0.7.19-beta.6
+
+### Patch Changes
+
+- Updated dependencies
+  - @channel.io/bezier-react@3.5.2-beta.6
+
+## 0.7.19-beta.5
+
+### Patch Changes
+
+- Updated dependencies
+  - @channel.io/bezier-react@3.5.2-beta.5
+
+## 0.7.19-beta.4
+
+### Patch Changes
+
+- Updated dependencies
+  - @channel.io/bezier-react@3.5.2-beta.4
+
+## 0.7.19-beta.3
+
+### Patch Changes
+
+- Updated dependencies
+  - @channel.io/bezier-react@3.5.2-beta.3
+
+## 0.7.19-beta.2
+
+### Patch Changes
+
+- Updated dependencies
+  - @channel.io/bezier-react@3.5.2-beta.2
+
+## 0.7.19-beta.1
+
+### Patch Changes
+
+- Migrate style tokens to beta tokens ([#2737](https://github.com/channel-io/bezier-react/pull/2737)) by @timok1m
+
+- Updated dependencies
+  - @channel.io/bezier-react@3.5.2-beta.1
+
+## 0.7.19-beta.0
+
+### Patch Changes
+
+- Updated dependencies
+  - @channel.io/bezier-react@3.5.2-beta.0
+
 ## 0.7.18
 
 ### Patch Changes

diff --git a/packages/bezier-figma-plugin/package.json b/packages/bezier-figma-plugin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bezier-figma-plugin",
-  "version": "0.7.18",
+  "version": "0.7.19-beta.11",
   "private": true,
   "description": "Figma plugin that helps build Bezier design system and increase productivity.",
   "repository": {
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@channel.io/bezier-icons": "0.52.0",
-    "@channel.io/bezier-react": "3.5.1",
+    "@channel.io/bezier-react": "3.5.2-beta.11",
     "octokit": "^4.0.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

diff --git a/packages/bezier-figma-plugin/src/ui/components/ExtractSuccess.tsx b/packages/bezier-figma-plugin/src/ui/components/ExtractSuccess.tsx
@@ -20,7 +20,7 @@ function ExtractSuccess() {
     >
       <Text typo="18">아이콘 추출 성공!</Text>
       <Text
-        color="bgtxt-blue-normal"
+        color="text-accent-blue"
         as="a"
         // @ts-expect-error
         href={url}

diff --git a/packages/bezier-react/.storybook/preview.module.scss b/packages/bezier-react/.storybook/preview.module.scss
@@ -1,11 +1,11 @@
 // Override the default styles for the Storybook docs
 :where(*:not(code, pre)) {
-  font-family: var(--font-family-sans-kr) !important;
+  font-family: var(--typography-text-font-family) !important;
 }
 
 :where(code, pre),
 :where(code, pre) * {
-  font-family: var(--font-family-mono) !important;
+  font-family: var(--typography-code-font-family) !important;
 }
 
 .Wrapper {
@@ -21,5 +21,5 @@
 .Story {
   height: 100%;
   padding: 40px;
-  background-color: var(--bg-white-normal);
+  background-color: var(--color-surface);
 }
diff --git a/packages/bezier-react/CHANGELOG.md b/packages/bezier-react/CHANGELOG.md
@@ -1,5 +1,105 @@
 # @channel.io/bezier-react
 
+## 3.5.2-beta.11
+
+### Patch Changes
+
+- Updated dependencies
+  - @channel.io/bezier-tokens@0.3.3-beta.9
+
+## 3.5.2-beta.10
+
+### Patch Changes
+
+- Update token values for dark mode visibility and edit Button component's background color ([#2769](https://github.com/channel-io/bezier-react/pull/2769)) by @timok1m
+
+- Updated dependencies
+  - @channel.io/bezier-tokens@0.3.3-beta.8
+
+## 3.5.2-beta.9
+
+### Patch Changes
+
+- Add invese color tokens and update grey-\* color value. Update bezier component colors ([#2767](https://github.com/channel-io/bezier-react/pull/2767)) by @timok1m
- Add invese color tokens and update grey-\* color value. Update bezier component colors ([#2767](https://github.com/channel-io/bezier-react/pull/2767)) by @timok1m
+- Add inverse color tokens and update grey-\* color value. Update bezier component colors ([#2767](https://github.com/channel-io/bezier-react/pull/2767)) by @timok1m
- Add invese color tokens and update grey-\* color value. Update bezier component colors ([#2767](https://github.com/channel-io/bezier-react/pull/2767)) by @timok1m
+- Add inverse color tokens and update grey-\* color value. Update bezier component colors ([#2767](https://github.com/channel-io/bezier-react/pull/2767)) by @timok1m
+
+- Updated dependencies
+  - @channel.io/bezier-tokens@0.3.3-beta.7
+
+## 3.5.2-beta.8
+
+### Patch Changes
+
+- Add text-accent-olive token, and update BetaBackgroundSemanticColor to accept BetaDimSemanticColor ([#2765](https://github.com/channel-io/bezier-react/pull/2765)) by @timok1m
+
+- Updated dependencies
+  - @channel.io/bezier-tokens@0.3.3-beta.6
+
+## 3.5.2-beta.7
+
+### Patch Changes
+
+- Fix Button's hover state styling ([#2758](https://github.com/channel-io/bezier-react/pull/2758)) by @timok1m
+
+## 3.5.2-beta.6
+
+### Patch Changes
+
+- Update v3 token name from with 'beta' prefix to no prefix ([#2756](https://github.com/channel-io/bezier-react/pull/2756)) by @timok1m
+
+- Updated dependencies
+  - @channel.io/bezier-tokens@0.3.3-beta.5
+
+## 3.5.2-beta.5
+
+### Patch Changes
+
+- Remove BetaTokens namespace to allow direct use of required types ([#2754](https://github.com/channel-io/bezier-react/pull/2754)) by @timok1m
+
+## 3.5.2-beta.4
+
+### Patch Changes
+
+- Add beta prefix to beta-tokens types to resolve naming conflicts ([#2750](https://github.com/channel-io/bezier-react/pull/2750)) by @timok1m
+
+- Add BetaTokenProvider, useBetaTokens and migrate the codebase. ([#2751](https://github.com/channel-io/bezier-react/pull/2751)) by @timok1m
+
+- Fixes the issue where backgroundColor="surface" was generating incorrect CSS variable name. ([#2748](https://github.com/channel-io/bezier-react/pull/2748)) by @timok1m
+
+- Replace useTokens().global.radius usage with individual '42%' styling in avatar components ([#2753](https://github.com/channel-io/bezier-react/pull/2753)) by @timok1m
+
+- Updated dependencies
+  - @channel.io/bezier-tokens@0.3.3-beta.4
+
+## 3.5.2-beta.3
+
+### Patch Changes
+
+- Modify bezier-react to exports beta-tokens ([#2747](https://github.com/channel-io/bezier-react/pull/2747)) by @timok1m
+
+- Update StartsWithPrefix to include both prefix-\* and exact prefix matches, enabling 'surface' token to be properly typed in SurfaceSemanticColor. ([#2744](https://github.com/channel-io/bezier-react/pull/2744)) by @timok1m
+
+- Updated dependencies
+  - @channel.io/bezier-tokens@0.3.3-beta.3
+
+## 3.5.2-beta.2
+
+### Patch Changes
+
+- Fix build configuration to include all dependencies used by bezier-react. Revert incorrect changes that were committed during testing and redeploy. ([#2740](https://github.com/channel-io/bezier-react/pull/2740)) by @timok1m
+
+## 3.5.2-beta.1
+
+### Patch Changes
+
+- Migrate style tokens to beta tokens ([#2737](https://github.com/channel-io/bezier-react/pull/2737)) by @timok1m
+
+## 3.5.2-beta.0
+
+### Patch Changes
+
+- Updated dependencies
+  - @channel.io/bezier-tokens@0.3.3-beta.2
+
 ## 3.5.1
 
 ### Patch Changes

diff --git a/packages/bezier-react/package.json b/packages/bezier-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@channel.io/bezier-react",
-  "version": "3.5.1",
+  "version": "3.5.2-beta.11",
   "description": "React components library that implements Bezier design system.",
   "repository": {
     "type": "git",
@@ -131,7 +131,7 @@
     }
   },
   "dependencies": {
-    "@channel.io/bezier-tokens": "0.3.2",
+    "@channel.io/bezier-tokens": "0.3.3-beta.9",
     "@radix-ui/react-checkbox": "^1.1.3",
     "@radix-ui/react-dialog": "^1.1.3",
     "@radix-ui/react-radio-group": "^1.2.2",

diff --git a/packages/bezier-react/src/components/AlphaAvatar/Avatar.module.scss b/packages/bezier-react/src/components/AlphaAvatar/Avatar.module.scss
@@ -8,7 +8,7 @@ $avatar-sizes: 16, 20, 24, 30, 36, 42, 48, 72, 90, 120;
 
   &:where(.disabled) {
     pointer-events: none;
-    opacity: var(--alpha-opacity-disabled);
+    opacity: var(--opacity-disabled);
   }
 
   @each $size in $avatar-sizes {

diff --git a/packages/bezier-react/src/components/AlphaAvatar/Avatar.tsx b/packages/bezier-react/src/components/AlphaAvatar/Avatar.tsx
@@ -12,7 +12,6 @@ import {
   type SmoothCornersBoxProps,
 } from '~/src/components/SmoothCornersBox'
 import { Status, type StatusSize } from '~/src/components/Status'
-import { useTokens } from '~/src/components/ThemeProvider'
 
 import type { AvatarProps, AvatarSize } from './Avatar.types'
 import defaultAvatarUrl from './assets/default-avatar.svg'
@@ -44,13 +43,12 @@ function getShadow(size: AvatarSize): SmoothCornersBoxProps['shadow'] {
 
   return {
     spreadRadius,
-    color: 'bg-white-high',
+    color: 'surface-higher',
   }
 }
 
 export function useAvatarRadiusToken() {
-  // TODO: Replace this with useAlphaTokens
-  return useTokens().global.radius['radius-42-p']
+  return '42%' as const
 }
 
 export const AVATAR_WRAPPER_TEST_ID = 'bezier-avatar-wrapper'
@@ -150,7 +148,7 @@ export const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(
         disabled={!smoothCorners}
         borderRadius={AVATAR_BORDER_RADIUS}
         shadow={showBorder ? getShadow(size) : undefined}
-        backgroundColor="bg-white-normal"
+        backgroundColor="surface"
         backgroundImage={loadedAvatarUrl}
         data-testid={AVATAR_TEST_ID}
       >

diff --git a/packages/bezier-react/src/components/AlphaAvatarGroup/AvatarGroup.module.scss b/packages/bezier-react/src/components/AlphaAvatarGroup/AvatarGroup.module.scss
@@ -5,7 +5,7 @@
   --b-avatar-group-size: 0;
 
   position: relative;
-  z-index: var(--z-index-base);
+  z-index: var(--layer-z-index-base);
   display: flex;
 
   @each $size in Avatar.$avatar-sizes {
@@ -25,7 +25,7 @@
 
 .AvatarEllipsisIcon {
   position: absolute;
-  z-index: var(--z-index-floating);
+  z-index: var(--layer-z-index-floating);
   top: 0;
   right: 0;
 

diff --git a/packages/bezier-react/src/components/AlphaAvatarGroup/AvatarGroup.tsx b/packages/bezier-react/src/components/AlphaAvatarGroup/AvatarGroup.tsx
@@ -137,13 +137,13 @@ export const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(
               >
                 <SmoothCornersBox
                   borderRadius={AVATAR_BORDER_RADIUS}
-                  backgroundColor="bgtxt-absolute-black-lightest"
+                  backgroundColor="fill-absolute-black-light"
                   className={styles.AvatarEllipsisIcon}
                 >
                   <Icon
                     source={MoreIcon}
                     size={getProperIconSize(size)}
-                    color="bgtxt-absolute-white-dark"
+                    color="text-absolute-white"
                   />
                 </SmoothCornersBox>
                 {AvatarElement}
@@ -167,7 +167,7 @@ export const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(
                 >
                   <Text
                     typo={getProperTypoSize(size)}
-                    color="txt-black-dark"
+                    color="text-neutral-lighter"
                     className={styles.AvatarEllipsisCount}
                   >
                     {getRestAvatarListCountText(avatarListCount, max)}