feat(bezier-react): converts cssVar to colorTokenCssVar

Author: sungik-choi

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
         }

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

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
       }

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
         }

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
         }

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,

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