From fbd6669a18c46dbd27d058204f4f1f2a23b22140 Mon Sep 17 00:00:00 2001
From: Ed Sungik Choi <sungik.dev@gmail.com>
Date: Fri, 15 Dec 2023 19:32:39 +0900
Subject: [PATCH] refactor(style): rename cssVarValue to cssVar

---
 .../AlphaSmoothCornersBox.tsx                      |  6 +++---
 .../src/components/Spinner/Spinner.tsx             |  4 ++--
 .../bezier-react/src/components/Status/Status.tsx  |  4 ++--
 packages/bezier-react/src/utils/props.ts           | 14 +++++++-------
 packages/bezier-react/src/utils/style.ts           |  6 +++---
 5 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/packages/bezier-react/src/components/AlphaSmoothCornersBox/AlphaSmoothCornersBox.tsx b/packages/bezier-react/src/components/AlphaSmoothCornersBox/AlphaSmoothCornersBox.tsx
index 463f2a7056..762f11af48 100644
--- a/packages/bezier-react/src/components/AlphaSmoothCornersBox/AlphaSmoothCornersBox.tsx
+++ b/packages/bezier-react/src/components/AlphaSmoothCornersBox/AlphaSmoothCornersBox.tsx
@@ -9,7 +9,7 @@ import {
 } from '~/src/features'
 import {
   cssUrl,
-  cssVarValue,
+  cssVar,
   px,
 } from '~/src/utils/style'
 
@@ -53,14 +53,14 @@ export const AlphaSmoothCornersBox = forwardRef<HTMLElement, AlphaSmoothCornersB
     '--b-alpha-smooth-corners-box-shadow-offset-y': shadow?.offsetY,
     '--b-alpha-smooth-corners-box-shadow-blur-radius': px(shadow?.blurRadius ?? 0),
     '--b-alpha-smooth-corners-box-shadow-spread-radius': px(shadowSpreadRadius),
-    '--b-alpha-smooth-corners-box-shadow-color': cssVarValue(shadow?.color),
+    '--b-alpha-smooth-corners-box-shadow-color': cssVar(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-alpha-smooth-corners-box-padding': px(shadowSpreadRadius * 2),
     '--b-alpha-smooth-corners-box-margin': px(margin ?? 0),
-    '--b-alpha-smooth-corners-box-background-color': cssVarValue(backgroundColor),
+    '--b-alpha-smooth-corners-box-background-color': cssVar(backgroundColor),
     '--b-alpha-smooth-corners-box-background-image': cssUrl(backgroundImage),
   }), [
     styleProp,
diff --git a/packages/bezier-react/src/components/Spinner/Spinner.tsx b/packages/bezier-react/src/components/Spinner/Spinner.tsx
index 41b0d6f11c..4a82d815ad 100644
--- a/packages/bezier-react/src/components/Spinner/Spinner.tsx
+++ b/packages/bezier-react/src/components/Spinner/Spinner.tsx
@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react'
 
 import classNames from 'classnames'
 
-import { cssVarValue } from '~/src/utils/style'
+import { cssVar } from '~/src/utils/style'
 
 import type SpinnerProps from './Spinner.types'
 import { SpinnerSize } from './Spinner.types'
@@ -27,7 +27,7 @@ const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(function Spinner({
       {...rest}
       ref={forwardedRef}
       style={{
-        '--b-spinner-color': cssVarValue(color),
+        '--b-spinner-color': cssVar(color),
         ...style,
       }}
       className={classNames(
diff --git a/packages/bezier-react/src/components/Status/Status.tsx b/packages/bezier-react/src/components/Status/Status.tsx
index 94d607512b..03a5698c00 100644
--- a/packages/bezier-react/src/components/Status/Status.tsx
+++ b/packages/bezier-react/src/components/Status/Status.tsx
@@ -11,7 +11,7 @@ import {
 import type { SemanticNames } from '~/src/foundation'
 
 import {
-  cssVarValue,
+  cssVar,
   px,
 } from '~/src/utils/style'
 
@@ -59,7 +59,7 @@ export const Status = memo(forwardRef(function Status({
       style={{
         ...style,
         '--b-status-size': px(size),
-        '--b-status-bg-color': cssVarValue(backgroundColor),
+        '--b-status-bg-color': cssVar(backgroundColor),
         '--b-status-border-width': px(getStatusCircleBorderWidth(size)),
       }}
       {...rest}
diff --git a/packages/bezier-react/src/utils/props.ts b/packages/bezier-react/src/utils/props.ts
index bbc74d4417..537e46fa20 100644
--- a/packages/bezier-react/src/utils/props.ts
+++ b/packages/bezier-react/src/utils/props.ts
@@ -7,8 +7,8 @@ import { TokenPrefix } from '~/src/types/Token'
 
 import { split } from './object'
 import {
-  cssVarValue,
-  tokenCssVarValue,
+  cssVar,
+  tokenCssVar,
 } from './style'
 
 const bezierComponentProps: Array<keyof BezierComponentProps> = [
@@ -149,17 +149,17 @@ export function getLayoutStyle<Props extends LayoutProps>(props: Props) {
     '--b-left': left,
     '--b-shrink': shrink,
     '--b-grow': grow,
-    '--b-bg-color': cssVarValue(bgColor),
-    '--b-border-color': cssVarValue(borderColor),
-    '--b-border-radius': tokenCssVarValue(borderRadius && `${TokenPrefix.Radius}-${borderRadius}`),
+    '--b-bg-color': cssVar(bgColor),
+    '--b-border-color': cssVar(borderColor),
+    '--b-border-radius': tokenCssVar(borderRadius && `${TokenPrefix.Radius}-${borderRadius}`),
     '--b-border-width': borderWidth,
     '--b-border-top-width': borderTopWidth,
     '--b-border-right-width': borderRightWidth,
     '--b-border-bottom-width': borderBottomWidth,
     '--b-border-left-width': borderLeftWidth,
     '--b-border-style': borderStyle,
-    '--b-elevation': tokenCssVarValue(elevation && `${TokenPrefix.Elevation}-${elevation}`),
-    '--b-z-index': tokenCssVarValue(zIndex && `${TokenPrefix.ZIndex}-${zIndex}`),
+    '--b-elevation': tokenCssVar(elevation && `${TokenPrefix.Elevation}-${elevation}`),
+    '--b-z-index': tokenCssVar(zIndex && `${TokenPrefix.ZIndex}-${zIndex}`),
     '--b-overflow': overflow,
     '--b-overflow-x': overflowX,
     '--b-overflow-y': overflowY,
diff --git a/packages/bezier-react/src/utils/style.ts b/packages/bezier-react/src/utils/style.ts
index 28c13d9745..80d1a307b5 100644
--- a/packages/bezier-react/src/utils/style.ts
+++ b/packages/bezier-react/src/utils/style.ts
@@ -38,7 +38,7 @@ export function touchableHover(interpolation: InjectedInterpolation): InjectedIn
 
 export const px = <Value extends number | undefined>(value: Value) => (!isNil(value) ? `${value}px` as const : undefined)
 
-export function cssVarValue<
+export function cssVar<
   PropertyName extends string | undefined,
 >(propertyName: PropertyName) {
   /* eslint-disable no-nested-ternary */
@@ -48,10 +48,10 @@ export function cssVarValue<
   /* eslint-enable no-nested-ternary */
 }
 
-export function tokenCssVarValue<
+export function tokenCssVar<
   PropertyName extends FlattenAllToken | undefined,
 >(propertyName: PropertyName) {
-  return cssVarValue(propertyName)
+  return cssVar(propertyName)
 }
 
 export function cssUrl(url: string | undefined) {