Minify the CSS output (#1791)

<!--
  How to write a good PR title:
- Follow [the Conventional Commits
specification](https://www.conventionalcommits.org/en/v1.0.0/).
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

## Self Checklist

- [x] I wrote a PR title in **English** and added an appropriate
**label** to the PR.
- [x] I wrote the commit message in **English** and to follow [**the
Conventional Commits
specification**](https://www.conventionalcommits.org/en/v1.0.0/).
- [x] I [added the
**changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md)
about the changes that needed to be released. (or didn't have to)
- [x] I wrote or updated **documentation** related to the changes. (or
didn't have to)
- [x] I wrote or updated **tests** related to the changes. (or didn't
have to)
- [x] I tested the changes in various browsers. (or didn't have to)
  - Windows: Chrome, Edge, (Optional) Firefox
  - macOS: Chrome, Edge, Safari, (Optional) Firefox

## Summary
<!-- Please brief explanation of the changes made -->

라이브러리 사용처에 제공되는 CSS output(style.css)의 용량을 줄입니다.

## Details
<!-- Please elaborate description of the changes -->


[rollup-plugin-postcss](https://www.npmjs.com/package/rollup-plugin-postcss)의
minify 옵션을 사용해서 내부의 [CSS Nano](https://cssnano.co/)를 통해 구현할 수 있었습니다. 하지만
CSS Nano로는 '중복되는 Cascade layer 블록을 합쳐주면 좋겠다' 라는 요구사항을 충족하지 못했습니다. 아래와 같은
상황입니다.

```css
/* AS-IS */
@layer foo {
  .a { }
}

@layer foo {
  .b { }
}

/* TO-BE */
@layer foo {
  .a { } 
  .b { }
}
```

새로운 스타일 시스템의 components layer에선 CSS modules를 사용하게되면서, 각 css module 파일을
`@layer components` 로 감싸게 됩니다. 이를 빌드 시 `style.css` 로 병합하는 과정에서, 중복된
`@layer components` 블록이 생기게됩니다.

Parcel에서 기본적으로 제공하고, Vite에서 CSS를 처리하는 데 옵셔널로 사용할 수 있는 lightning CSS에서 이
기능이 구현되어 있었습니다.
(parcel-bundler/lightningcss#216) 이 기능만을 사용하기
위해서 번들러를 변경하거나, 혹은 lightning CSS가 CSS 전처리기를 지원하지 않는 이유로 SCSS module을 CSS
module로 변경하는 작업은 불필요하다고 판단했습니다. 따라서 build generate과정에서 만들어진 `style.css`
를 lightning css의 node 패키지를 통해 최적화하는 작업을 수행하도록 했습니다.

추가로, minify시에도 줄어들지 않는 className이나 css variable property name의 길이를 함께 조금
줄이는 작업을 진행했습니다.

- css module class name의 길이를 디버깅 시 가독성을 해치지 않는다고 판단하는 선에서 줄였습니다.
- css variable의 `--bezier` prefix를 `--b` 로 줄였습니다.
  - 그 과정에서 Spinner에 누락되어있던 css variable 관련 style util을 적용했습니다.

그 외: `style.css` 을 `styles.css` 로 변경합니다. bezier-tokens와 통일하기 위해서입니다.

### Diff

ef56dc1 commit 기준

- AS-IS: 22K
- TO-BE: 17K (약 -23%)

### Breaking change? (Yes/No)
<!-- If Yes, please describe the impact and migration path for users -->

No

## References
<!-- Please list any other resources or points the reviewer should be
aware of -->

- https://lightningcss.dev/docs.html
- parcel-bundler/lightningcss#211
- parcel-bundler/lightningcss#216

.changeset/hip-students-care.md

@@ -0,0 +1,5 @@
+---
+"@channel.io/bezier-react": patch
+---
+
+Minify the CSS output.

.changeset/thirty-dodos-push.md

@@ -0,0 +1,5 @@
+---
+"@channel.io/bezier-react": minor
+---
+
+Rename the `style.css` file to `styles.css`.

packages/bezier-react/package.json

@@ -105,6 +105,7 @@
     "eslint-plugin-storybook": "^0.6.13",
     "identity-obj-proxy": "^3.0.0",
     "jest-styled-components": "^7.1.1",
+    "lightningcss": "^1.22.1",
     "paths.macro": "^3.0.1",
     "postcss-preset-env": "^9.3.0",
     "react": "^18.2.0",

packages/bezier-react/rollup.config.mjs

@@ -9,6 +9,7 @@ import commonjs from '@rollup/plugin-commonjs'
 import { nodeResolve } from '@rollup/plugin-node-resolve'
 import url from '@rollup/plugin-url'
 import autoprefixer from 'autoprefixer'
+import { transform } from 'lightningcss'
 import postcssPresetEnv from 'postcss-preset-env'
 import { defineConfig } from 'rollup'
 import nodeExternals from 'rollup-plugin-node-externals'
@@ -20,9 +21,37 @@ const pkg = JSON.parse(
 )
 
 const rootDir = fileURLToPath(new URL('.', import.meta.url))
+const styleSheetDir = 'styles.css'
 
 const extensions = [...DEFAULT_EXTENSIONS, '.ts', '.tsx']
 
+/**
+ * @type {import('rollup').PluginImpl}
+ */
+function minifycss() {
+  return {
+    name: 'minify-css',
+    generateBundle(options, bundle) {
+      const styleSheetFile = bundle[styleSheetDir]
+      const { code: optimizedSource } = transform({
+        code: styleSheetFile.source,
+        minify: true,
+      })
+
+      /**
+       * NOTE: To avoid the following error:
+       * (!) The emitted file 'style.css' overwrites a previously emitted file of the same name.
+       */
+      delete bundle[styleSheetDir]
+
+      this.emitFile({
+        ...styleSheetFile,
+        source: optimizedSource,
+      })
+    },
+  }
+}
+
 const generateConfig = ({
   output = [],
   plugins = [],
@@ -37,13 +66,13 @@ const generateConfig = ({
       }],
     }),
     postcss({
-      extract: 'style.css',
+      extract: styleSheetDir,
       autoModules: true,
       modules: {
         /**
-         * ex. Bezier-Button__Button__1w3e4
+         * ex. b-Button__1w3e4
          */
-        generateScopedName: 'Bezier-[folder]__[local]__[hash:base64:5]',
+        generateScopedName: 'b-[local]__[hash:base64:5]',
       },
       plugins: [
         autoprefixer(),
@@ -75,6 +104,7 @@ const generateConfig = ({
     }),
     url(),
     visualizer({ filename: 'stats.html' }),
+    minifycss(),
     ...plugins,
   ],
 })

packages/bezier-react/src/components/AlphaSmoothCornersBox/AlphaSmoothCornersBox.styled.ts

@@ -2,37 +2,37 @@
 import { styled } from '~/src/foundation'
 
 export const Box = styled.div`
-  --bezier-alpha-smooth-corners-box-border-radius: 0;
-  --bezier-alpha-smooth-corners-box-shadow-offset-x: 0;
-  --bezier-alpha-smooth-corners-box-shadow-offset-y: 0;
-  --bezier-alpha-smooth-corners-box-shadow-blur-radius: 0px;
-  --bezier-alpha-smooth-corners-box-shadow-spread-radius: 0px;
-  --bezier-alpha-smooth-corners-box-shadow-color: transparent;
-  --bezier-alpha-smooth-corners-box-padding: 0px;
-  --bezier-alpha-smooth-corners-box-margin: 0px;
-  --bezier-alpha-smooth-corners-box-background-color: transparent;
+  --b-alpha-smooth-corners-box-border-radius: 0;
+  --b-alpha-smooth-corners-box-shadow-offset-x: 0;
+  --b-alpha-smooth-corners-box-shadow-offset-y: 0;
+  --b-alpha-smooth-corners-box-shadow-blur-radius: 0px;
+  --b-alpha-smooth-corners-box-shadow-spread-radius: 0px;
+  --b-alpha-smooth-corners-box-shadow-color: transparent;
+  --b-alpha-smooth-corners-box-padding: 0px;
+  --b-alpha-smooth-corners-box-margin: 0px;
+  --b-alpha-smooth-corners-box-background-color: transparent;
 
-  margin: var(--bezier-alpha-smooth-corners-box-margin);
-  background-color: var(--bezier-alpha-smooth-corners-box-background-color);
-  background-image: var(--bezier-alpha-smooth-corners-box-background-image);
+  margin: var(--b-alpha-smooth-corners-box-margin);
+  background-color: var(--b-alpha-smooth-corners-box-background-color);
+  background-image: var(--b-alpha-smooth-corners-box-background-image);
   background-size: cover;
-  border-radius: var(--bezier-alpha-smooth-corners-box-border-radius);
-  box-shadow: var(--bezier-alpha-smooth-corners-box-shadow-offset-x) var(--bezier-alpha-smooth-corners-box-shadow-offset-y) var(--bezier-alpha-smooth-corners-box-shadow-blur-radius) var(--bezier-alpha-smooth-corners-box-shadow-spread-radius) var(--bezier-alpha-smooth-corners-box-shadow-color);
+  border-radius: var(--b-alpha-smooth-corners-box-border-radius);
+  box-shadow: var(--b-alpha-smooth-corners-box-shadow-offset-x) var(--b-alpha-smooth-corners-box-shadow-offset-y) var(--b-alpha-smooth-corners-box-shadow-blur-radius) var(--b-alpha-smooth-corners-box-shadow-spread-radius) var(--b-alpha-smooth-corners-box-shadow-color);
 
   &[data-state="enabled"] {
     @supports (background: paint(smooth-corners)) {
-      padding: var(--bezier-alpha-smooth-corners-box-padding);
-      margin: calc(var(--bezier-alpha-smooth-corners-box-margin) + (-1 * var(--bezier-alpha-smooth-corners-box-padding)));
+      padding: var(--b-alpha-smooth-corners-box-padding);
+      margin: calc(var(--b-alpha-smooth-corners-box-margin) + (-1 * var(--b-alpha-smooth-corners-box-padding)));
       background: paint(smooth-corners);
       border-radius: 0;
-      border-image-source: var(--bezier-alpha-smooth-corners-box-background-image);
+      border-image-source: var(--b-alpha-smooth-corners-box-background-image);
       box-shadow: none;
 
-      --smooth-corners: var(--bezier-alpha-smooth-corners-box-border-radius);
-      --smooth-corners-shadow: var(--bezier-alpha-smooth-corners-box-shadow-offset-x) var(--bezier-alpha-smooth-corners-box-shadow-offset-y) var(--bezier-alpha-smooth-corners-box-shadow-blur-radius) var(--bezier-alpha-smooth-corners-box-shadow-spread-radius) var(--bezier-alpha-smooth-corners-box-shadow-color);
-      --smooth-corners-bg-color: var(--bezier-alpha-smooth-corners-box-background-color);
-      --smooth-corners-padding: var(--bezier-alpha-smooth-corners-box-padding);
-      --smooth-corners-radius-unit: var(--bezier-alpha-smooth-corners-box-border-radius-type);
+      --smooth-corners: var(--b-alpha-smooth-corners-box-border-radius);
+      --smooth-corners-shadow: var(--b-alpha-smooth-corners-box-shadow-offset-x) var(--b-alpha-smooth-corners-box-shadow-offset-y) var(--b-alpha-smooth-corners-box-shadow-blur-radius) var(--b-alpha-smooth-corners-box-shadow-spread-radius) var(--b-alpha-smooth-corners-box-shadow-color);
+      --smooth-corners-bg-color: var(--b-alpha-smooth-corners-box-background-color);
+      --smooth-corners-padding: var(--b-alpha-smooth-corners-box-padding);
+      --smooth-corners-radius-unit: var(--b-alpha-smooth-corners-box-border-radius-type);
     }
   }
 `

packages/bezier-react/src/components/AlphaSmoothCornersBox/AlphaSmoothCornersBox.test.tsx

@@ -41,17 +41,17 @@ describe('AlphaSmoothCornersBox', () => {
       const rendered = getByText(children)
       const styles = window.getComputedStyle(rendered)
 
-      expect(styles.getPropertyValue('--bezier-alpha-smooth-corners-box-border-radius')).toBe('10')
-      expect(styles.getPropertyValue('--bezier-alpha-smooth-corners-box-border-radius-type')).toBe('number')
-      expect(styles.getPropertyValue('--bezier-alpha-smooth-corners-box-shadow-offset-x')).toBe('10')
-      expect(styles.getPropertyValue('--bezier-alpha-smooth-corners-box-shadow-offset-y')).toBe('10')
-      expect(styles.getPropertyValue('--bezier-alpha-smooth-corners-box-shadow-blur-radius')).toBe('10px')
-      expect(styles.getPropertyValue('--bezier-alpha-smooth-corners-box-shadow-spread-radius')).toBe('10px')
-      expect(styles.getPropertyValue('--bezier-alpha-smooth-corners-box-shadow-color')).toBe('var(--bg-black-light)')
-      expect(styles.getPropertyValue('--bezier-alpha-smooth-corners-box-padding')).toBe('20px')
-      expect(styles.getPropertyValue('--bezier-alpha-smooth-corners-box-margin')).toBe('10px')
-      expect(styles.getPropertyValue('--bezier-alpha-smooth-corners-box-background-color')).toBe('var(--bg-black-light)')
-      expect(styles.getPropertyValue('--bezier-alpha-smooth-corners-box-background-image')).toBe('url(foo/bar)')
+      expect(styles.getPropertyValue('--b-alpha-smooth-corners-box-border-radius')).toBe('10')
+      expect(styles.getPropertyValue('--b-alpha-smooth-corners-box-border-radius-type')).toBe('number')
+      expect(styles.getPropertyValue('--b-alpha-smooth-corners-box-shadow-offset-x')).toBe('10')
+      expect(styles.getPropertyValue('--b-alpha-smooth-corners-box-shadow-offset-y')).toBe('10')
+      expect(styles.getPropertyValue('--b-alpha-smooth-corners-box-shadow-blur-radius')).toBe('10px')
+      expect(styles.getPropertyValue('--b-alpha-smooth-corners-box-shadow-spread-radius')).toBe('10px')
+      expect(styles.getPropertyValue('--b-alpha-smooth-corners-box-shadow-color')).toBe('var(--bg-black-light)')
+      expect(styles.getPropertyValue('--b-alpha-smooth-corners-box-padding')).toBe('20px')
+      expect(styles.getPropertyValue('--b-alpha-smooth-corners-box-margin')).toBe('10px')
+      expect(styles.getPropertyValue('--b-alpha-smooth-corners-box-background-color')).toBe('var(--bg-black-light)')
+      expect(styles.getPropertyValue('--b-alpha-smooth-corners-box-background-image')).toBe('url(foo/bar)')
     })
   })
 })

packages/bezier-react/src/components/AlphaSmoothCornersBox/__snapshots__/AlphaSmoothCornersBox.test.tsx.snap

@@ -2,44 +2,44 @@
 
 exports[`AlphaSmoothCornersBox Style snapshot with default value 1`] = `
 .c0 {
-  --bezier-alpha-smooth-corners-box-border-radius: 0;
-  --bezier-alpha-smooth-corners-box-shadow-offset-x: 0;
-  --bezier-alpha-smooth-corners-box-shadow-offset-y: 0;
-  --bezier-alpha-smooth-corners-box-shadow-blur-radius: 0px;
-  --bezier-alpha-smooth-corners-box-shadow-spread-radius: 0px;
-  --bezier-alpha-smooth-corners-box-shadow-color: transparent;
-  --bezier-alpha-smooth-corners-box-padding: 0px;
-  --bezier-alpha-smooth-corners-box-margin: 0px;
-  --bezier-alpha-smooth-corners-box-background-color: transparent;
-  margin: var(--bezier-alpha-smooth-corners-box-margin);
-  background-color: var(--bezier-alpha-smooth-corners-box-background-color);
-  background-image: var(--bezier-alpha-smooth-corners-box-background-image);
+  --b-alpha-smooth-corners-box-border-radius: 0;
+  --b-alpha-smooth-corners-box-shadow-offset-x: 0;
+  --b-alpha-smooth-corners-box-shadow-offset-y: 0;
+  --b-alpha-smooth-corners-box-shadow-blur-radius: 0px;
+  --b-alpha-smooth-corners-box-shadow-spread-radius: 0px;
+  --b-alpha-smooth-corners-box-shadow-color: transparent;
+  --b-alpha-smooth-corners-box-padding: 0px;
+  --b-alpha-smooth-corners-box-margin: 0px;
+  --b-alpha-smooth-corners-box-background-color: transparent;
+  margin: var(--b-alpha-smooth-corners-box-margin);
+  background-color: var(--b-alpha-smooth-corners-box-background-color);
+  background-image: var(--b-alpha-smooth-corners-box-background-image);
   background-size: cover;
-  border-radius: var(--bezier-alpha-smooth-corners-box-border-radius);
-  box-shadow: var(--bezier-alpha-smooth-corners-box-shadow-offset-x) var(--bezier-alpha-smooth-corners-box-shadow-offset-y) var(--bezier-alpha-smooth-corners-box-shadow-blur-radius) var(--bezier-alpha-smooth-corners-box-shadow-spread-radius) var(--bezier-alpha-smooth-corners-box-shadow-color);
+  border-radius: var(--b-alpha-smooth-corners-box-border-radius);
+  box-shadow: var(--b-alpha-smooth-corners-box-shadow-offset-x) var(--b-alpha-smooth-corners-box-shadow-offset-y) var(--b-alpha-smooth-corners-box-shadow-blur-radius) var(--b-alpha-smooth-corners-box-shadow-spread-radius) var(--b-alpha-smooth-corners-box-shadow-color);
 }
 
 @supports (background:paint(smooth-corners)) {
   .c0[data-state="enabled"] {
-    padding: var(--bezier-alpha-smooth-corners-box-padding);
-    margin: calc(var(--bezier-alpha-smooth-corners-box-margin) + (-1 * var(--bezier-alpha-smooth-corners-box-padding)));
+    padding: var(--b-alpha-smooth-corners-box-padding);
+    margin: calc(var(--b-alpha-smooth-corners-box-margin) + (-1 * var(--b-alpha-smooth-corners-box-padding)));
     background: paint(smooth-corners);
     border-radius: 0;
-    border-image-source: var(--bezier-alpha-smooth-corners-box-background-image);
+    border-image-source: var(--b-alpha-smooth-corners-box-background-image);
     box-shadow: none;
-    --smooth-corners: var(--bezier-alpha-smooth-corners-box-border-radius);
-    --smooth-corners-shadow: var(--bezier-alpha-smooth-corners-box-shadow-offset-x) var(--bezier-alpha-smooth-corners-box-shadow-offset-y) var(--bezier-alpha-smooth-corners-box-shadow-blur-radius) var(--bezier-alpha-smooth-corners-box-shadow-spread-radius) var(--bezier-alpha-smooth-corners-box-shadow-color);
-    --smooth-corners-bg-color: var(--bezier-alpha-smooth-corners-box-background-color);
-    --smooth-corners-padding: var(--bezier-alpha-smooth-corners-box-padding);
-    --smooth-corners-radius-unit: var(--bezier-alpha-smooth-corners-box-border-radius-type);
+    --smooth-corners: var(--b-alpha-smooth-corners-box-border-radius);
+    --smooth-corners-shadow: var(--b-alpha-smooth-corners-box-shadow-offset-x) var(--b-alpha-smooth-corners-box-shadow-offset-y) var(--b-alpha-smooth-corners-box-shadow-blur-radius) var(--b-alpha-smooth-corners-box-shadow-spread-radius) var(--b-alpha-smooth-corners-box-shadow-color);
+    --smooth-corners-bg-color: var(--b-alpha-smooth-corners-box-background-color);
+    --smooth-corners-padding: var(--b-alpha-smooth-corners-box-padding);
+    --smooth-corners-radius-unit: var(--b-alpha-smooth-corners-box-border-radius-type);
   }
 }
 
 <div>
   <div
     class="c0"
     data-state="disabled"
-    style="--bezier-alpha-smooth-corners-box-border-radius-type: undefined; --bezier-alpha-smooth-corners-box-shadow-blur-radius: 0px; --bezier-alpha-smooth-corners-box-shadow-spread-radius: 0px; --bezier-alpha-smooth-corners-box-padding: 0px; --bezier-alpha-smooth-corners-box-margin: 0px;"
+    style="--b-alpha-smooth-corners-box-border-radius-type: undefined; --b-alpha-smooth-corners-box-shadow-blur-radius: 0px; --b-alpha-smooth-corners-box-shadow-spread-radius: 0px; --b-alpha-smooth-corners-box-padding: 0px; --b-alpha-smooth-corners-box-margin: 0px;"
   />
 </div>
 `;

packages/bezier-react/src/components/AlphaStack/AlphaStack.styled.ts

@@ -7,18 +7,18 @@ interface ContainerProps extends
 
 export const Container = styled.div<ContainerProps>`
   display: flex;
-  flex-direction: var(--bezier-alpha-stack-direction);
-  gap: var(--bezier-alpha-stack-spacing);
-  align-items: var(--bezier-alpha-stack-align);
-  justify-content: var(--bezier-alpha-stack-justify);
+  flex-direction: var(--b-alpha-stack-direction);
+  gap: var(--b-alpha-stack-spacing);
+  align-items: var(--b-alpha-stack-align);
+  justify-content: var(--b-alpha-stack-justify);
 
-  @supports not(gap: var(--bezier-alpha-stack-spacing)) {
-    margin-top: calc(var(--bezier-alpha-stack-spacing) * -1);
-    margin-left: calc(var(--bezier-alpha-stack-spacing) * -1);
+  @supports not(gap: var(--b-alpha-stack-spacing)) {
+    margin-top: calc(var(--b-alpha-stack-spacing) * -1);
+    margin-left: calc(var(--b-alpha-stack-spacing) * -1);
 
     > * {
-      margin-top: var(--bezier-alpha-stack-spacing);
-      margin-left: var(--bezier-alpha-stack-spacing);
+      margin-top: var(--b-alpha-stack-spacing);
+      margin-left: var(--b-alpha-stack-spacing);
     }
   }
   ${({ interpolation }) => interpolation}

packages/bezier-react/src/components/AlphaStack/AlphaStack.test.tsx

@@ -17,19 +17,19 @@ describe('alpha-Stack', () => {
     it('creates a horizontal flexbox when given direction="horizontal"', () => {
       const { getByTestId } = render(<AlphaStack direction="horizontal" testId="alpha-stack" spacing={10} />)
 
-      expect(getByTestId('alpha-stack')).toHaveStyle('flex-direction: var(--bezier-alpha-stack-direction)')
-      expect(getByTestId('alpha-stack')).toHaveStyle('--bezier-alpha-stack-direction: row')
-      expect(getByTestId('alpha-stack')).toHaveStyle('gap: var(--bezier-alpha-stack-spacing)')
-      expect(getByTestId('alpha-stack')).toHaveStyle('--bezier-alpha-stack-spacing: 10px')
+      expect(getByTestId('alpha-stack')).toHaveStyle('flex-direction: var(--b-alpha-stack-direction)')
+      expect(getByTestId('alpha-stack')).toHaveStyle('--b-alpha-stack-direction: row')
+      expect(getByTestId('alpha-stack')).toHaveStyle('gap: var(--b-alpha-stack-spacing)')
+      expect(getByTestId('alpha-stack')).toHaveStyle('--b-alpha-stack-spacing: 10px')
     })
 
     it('creates a vertical flexbox when given direction="vertical"', () => {
       const { getByTestId } = render(<AlphaStack direction="vertical" testId="alpha-stack" spacing={10} />)
 
-      expect(getByTestId('alpha-stack')).toHaveStyle('flex-direction: var(--bezier-alpha-stack-direction)')
-      expect(getByTestId('alpha-stack')).toHaveStyle('--bezier-alpha-stack-direction: column')
-      expect(getByTestId('alpha-stack')).toHaveStyle('gap: var(--bezier-alpha-stack-spacing)')
-      expect(getByTestId('alpha-stack')).toHaveStyle('--bezier-alpha-stack-spacing: 10px')
+      expect(getByTestId('alpha-stack')).toHaveStyle('flex-direction: var(--b-alpha-stack-direction)')
+      expect(getByTestId('alpha-stack')).toHaveStyle('--b-alpha-stack-direction: column')
+      expect(getByTestId('alpha-stack')).toHaveStyle('gap: var(--b-alpha-stack-spacing)')
+      expect(getByTestId('alpha-stack')).toHaveStyle('--b-alpha-stack-spacing: 10px')
     })
   })
 

packages/bezier-react/src/components/Avatars/Avatar/Avatar.styled.ts

@@ -68,7 +68,7 @@ export const AvatarWrapper = styled.div<InterpolationProps>`
 `
 
 export const AvatarImage = styled(AlphaSmoothCornersBox)`
-  --bezier-avatar-computed-status-gap: var(--bezier-avatar-status-gap);
+  --b-avatar-computed-status-gap: var(--b-avatar-status-gap);
 
   position: relative;
   box-sizing: content-box;
@@ -81,13 +81,13 @@ export const AvatarImage = styled(AlphaSmoothCornersBox)`
   outline: none;
 
   &.bordered[data-state="enabled"] {
-    --bezier-avatar-computed-status-gap: calc(var(--bezier-avatar-status-gap) + (2 * var(--bezier-alpha-smooth-corners-box-shadow-spread-radius)));
+    --b-avatar-computed-status-gap: calc(var(--b-avatar-status-gap) + (2 * var(--b-alpha-smooth-corners-box-shadow-spread-radius)));
   }
 `
 
 export const StatusWrapper = styled.div`
   position: absolute;
-  right: var(--bezier-avatar-computed-status-gap, 0);
-  bottom: var(--bezier-avatar-computed-status-gap, 0);
+  right: var(--b-avatar-computed-status-gap, 0);
+  bottom: var(--b-avatar-computed-status-gap, 0);
   display: flex;
 `