Implement css var related util functions (#1736)

sungik-choi · web-flow · commit 410c21ad4354 · 2023-11-22T18:54:33.000+09:00
## 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  CSS variable과 관련된 유틸 함수를 개선 & 추가 구현합니다. ## Details  중복 제거 & 일관적인 컨벤션을 위한 유틸 함수들을 구현했습니다. - 인라인 스타일로 주입하는 CSS Variable의 네이밍 컨벤션을 위한 함수 - 그 외: `px` unit을 붙이는 조건 체크 없이 쉽게 사용할 수 있도록 하는 함수 ### Breaking change? (Yes/No)  No
diff --git a/packages/bezier-react/src/components/AlphaSmoothCornersBox/AlphaSmoothCornersBox.tsx b/packages/bezier-react/src/components/AlphaSmoothCornersBox/AlphaSmoothCornersBox.tsx
@@ -9,13 +9,17 @@ import {
 } from '~/src/features'
 import {
   cssUrl,
-  cssVar,
+  cssVarName,
+  cssVarValue,
+  px,
 } from '~/src/utils/styleUtils'
 
 import { type AlphaSmoothCornersBoxProps } from './AlphaSmoothCornersBox.types'
 
 import * as Styled from './AlphaSmoothCornersBox.styled'
 
+const cv = cssVarName('alpha-smooth-corners-box')
+
 /**
  * `AlphaSmoothCornersBox` is a simple `div` element with smooth corners.
  * It is available by enabling the `SmoothCornersFeature`.
@@ -46,21 +50,21 @@ export const AlphaSmoothCornersBox = forwardRef<HTMLElement, AlphaSmoothCornersB
 
   const style = useMemo(() => ({
     ...styleProp,
-    '--bezier-alpha-smooth-corners-box-border-radius': borderRadius,
-    '--bezier-alpha-smooth-corners-box-border-radius-type': typeof borderRadius,
-    '--bezier-alpha-smooth-corners-box-shadow-offset-x': shadow?.offsetX,
-    '--bezier-alpha-smooth-corners-box-shadow-offset-y': shadow?.offsetY,
-    '--bezier-alpha-smooth-corners-box-shadow-blur-radius': `${shadow?.blurRadius ?? 0}px`,
-    '--bezier-alpha-smooth-corners-box-shadow-spread-radius': `${shadowSpreadRadius}px`,
-    '--bezier-alpha-smooth-corners-box-shadow-color': cssVar(shadow?.color),
+    [cv('border-radius')]: borderRadius,
+    [cv('border-radius-type')]: typeof borderRadius,
+    [cv('shadow-offset-x')]: shadow?.offsetX,
+    [cv('shadow-offset-y')]: shadow?.offsetY,
+    [cv('shadow-blur-radius')]: px(shadow?.blurRadius ?? 0),
+    [cv('shadow-spread-radius')]: px(shadowSpreadRadius),
+    [cv('shadow-color')]: cssVarValue(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}
      */
-    '--bezier-alpha-smooth-corners-box-padding': `${shadowSpreadRadius * 2}px`,
-    '--bezier-alpha-smooth-corners-box-margin': `${margin ?? 0}px`,
-    '--bezier-alpha-smooth-corners-box-background-color': cssVar(backgroundColor),
-    '--bezier-alpha-smooth-corners-box-background-image': cssUrl(backgroundImage),
+    [cv('padding')]: px(shadowSpreadRadius * 2),
+    [cv('margin')]: px(margin ?? 0),
+    [cv('background-color')]: cssVarValue(backgroundColor),
+    [cv('background-image')]: cssUrl(backgroundImage),
   }), [
     styleProp,
     borderRadius,
diff --git a/packages/bezier-react/src/components/AlphaStack/AlphaStack.tsx b/packages/bezier-react/src/components/AlphaStack/AlphaStack.tsx
@@ -4,12 +4,19 @@ import React, {
   useMemo,
 } from 'react'
 
+import {
+  cssVarName,
+  px,
+} from '~/src/utils/styleUtils'
+
 import { flex } from '~/src/components/Stack/util'
 
 import type { AlphaStackProps } from './AlphaStack.types'
 
 import * as Styled from './AlphaStack.styled'
 
+const cv = cssVarName('alpha-stack')
+
 /**
  * `AlphaStack` provides an abstraction of **flex layout** so that
  * rendering of child elements **linearly** can be done
@@ -46,10 +53,10 @@ export const AlphaStack = forwardRef(function AlphaStack(
 ) {
   const stackStyle = useMemo(() => ({
     ...style,
-    '--bezier-alpha-stack-direction': direction === 'horizontal' ? 'row' : 'column',
-    '--bezier-alpha-stack-justify': flex(justify),
-    '--bezier-alpha-stack-align': flex(align),
-    '--bezier-alpha-stack-spacing': `${spacing}px`,
+    [cv('direction')]: direction === 'horizontal' ? 'row' : 'column',
+    [cv('justify')]: flex(justify),
+    [cv('align')]: flex(align),
+    [cv('spacing')]: px(spacing),
   } as React.CSSProperties),
   [
     align,
diff --git a/packages/bezier-react/src/components/Avatars/Avatar/Avatar.tsx b/packages/bezier-react/src/components/Avatars/Avatar/Avatar.tsx
@@ -5,6 +5,10 @@ import React, {
 
 import classNames from 'classnames'
 
+import {
+  cssVarName,
+  px,
+} from '~/src/utils/styleUtils'
 import { isEmpty } from '~/src/utils/typeUtils'
 
 import { type BoxShadow } from '~/src/components/AlphaSmoothCornersBox'
@@ -24,6 +28,8 @@ import useProgressiveImage from './useProgressiveImage'
 
 import * as Styled from './Avatar.styled'
 
+const cv = cssVarName('avatar')
+
 const shadow: BoxShadow = {
   spreadRadius: 2,
   color: 'bg-white-high',
@@ -90,7 +96,7 @@ export const Avatar = forwardRef(function Avatar({
   )
 
   const avatarStyle = useMemo(() => ({
-    '--bezier-avatar-status-gap': `${size >= AvatarSize.Size72 ? 4 : -2}px`,
+    [cv('status-gap')]: px(size >= AvatarSize.Size72 ? 4 : -2),
   } as React.CSSProperties), [size])
 
   return (
diff --git a/packages/bezier-react/src/components/Avatars/AvatarGroup/AvatarGroup.tsx b/packages/bezier-react/src/components/Avatars/AvatarGroup/AvatarGroup.tsx
@@ -10,6 +10,10 @@ import { Typography } from '~/src/foundation'
 
 import { isLastIndex } from '~/src/utils/arrayUtils'
 import { noop } from '~/src/utils/functionUtils'
+import {
+  cssVarName,
+  px,
+} from '~/src/utils/styleUtils'
 
 import {
   type AvatarProps,
@@ -31,6 +35,8 @@ import {
 
 import * as Styled from './AvatarGroup.styled'
 
+const cv = cssVarName('avatar-group')
+
 const MAX_AVATAR_LIST_COUNT = 99
 
 export const AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID = 'bezier-react-avatar-group-ellipsis-icon'
@@ -163,8 +169,8 @@ forwardedRef: React.Ref<HTMLDivElement>,
             { AvatarElement }
             <Styled.AvatarEllipsisCountWrapper
               style={{
-                '--bezier-avatar-group-ellipsis-mr': `${getProperEllipsisCountMarginRight(size)}px`,
-                '--bezier-avatar-group-ellipsis-ml': `${Math.max(spacing, AVATAR_GROUP_DEFAULT_SPACING)}px`,
+                [cv('ellipsis-mr')]: px(getProperEllipsisCountMarginRight(size)),
+                [cv('ellipsis-ml')]: px(Math.max(spacing, AVATAR_GROUP_DEFAULT_SPACING)),
               } as React.CSSProperties}
               onMouseEnter={onMouseEnterEllipsis}
               onMouseLeave={onMouseLeaveEllipsis}
@@ -203,8 +209,8 @@ forwardedRef: React.Ref<HTMLDivElement>,
       className={className}
       style={{
         ...style,
-        '--bezier-avatar-group-spacing': `${spacing}px`,
-        '--bezier-avatar-group-size': `${size}px`,
+        [cv('spacing')]: px(spacing),
+        [cv('size')]: px(size),
       } as React.CSSProperties}
       {...rest}
     >
diff --git a/packages/bezier-react/src/components/Forms/Checkbox/Checkbox.tsx b/packages/bezier-react/src/components/Forms/Checkbox/Checkbox.tsx
@@ -7,6 +7,10 @@ import {
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
 
 import useId from '~/src/hooks/useId'
+import {
+  cssVarName,
+  px,
+} from '~/src/utils/styleUtils'
 
 import { FormFieldSize } from '~/src/components/Forms'
 import useFormFieldProps from '~/src/components/Forms/useFormFieldProps'
@@ -19,6 +23,8 @@ import {
 
 import * as Styled from './Checkbox.styled'
 
+const cv = cssVarName('checkbox')
+
 type CheckIconProps = {} | {
   style: React.CSSProperties
   'data-state': 'checked' | 'unchecked' | 'indeterminate'
@@ -61,7 +67,7 @@ function CheckboxImpl<Checked extends CheckedState>({
   const id = useId(idProp ?? formFieldId, 'bezier-checkbox')
 
   const containerStyle = {
-    '--bezier-checkbox-height': children ? `${FormFieldSize.M}px` : 'auto',
+    [cv('height')]: children ? px(FormFieldSize.M) : 'auto',
   } as React.CSSProperties
 
   return (
diff --git a/packages/bezier-react/src/components/Forms/FormControl/FormControl.tsx b/packages/bezier-react/src/components/Forms/FormControl/FormControl.tsx
@@ -12,6 +12,10 @@ import {
   omitBezierComponentProps,
   pickBezierComponentProps,
 } from '~/src/utils/propsUtils'
+import {
+  cssVarName,
+  px,
+} from '~/src/utils/styleUtils'
 import { isNil } from '~/src/utils/typeUtils'
 
 import { AlphaStack } from '~/src/components/AlphaStack'
@@ -32,6 +36,8 @@ import { FormControlContextProvider } from './FormControlContext'
 
 import * as Styled from './FormControl.styled'
 
+const cv = cssVarName('form-control')
+
 export const FORM_CONTROL_TEST_ID = 'bezier-react-form-control'
 
 const Container = forwardRef<HTMLElement, ContainerProps>(function Container({
@@ -194,7 +200,7 @@ export const FormControl = forwardRef<HTMLElement, FormControlProps>(function Fo
 
   const containerStyle = useMemo(() => ({
     ...style,
-    '--bezier-form-control-left-label-wrapper-height': `${leftLabelWrapperHeight}px`,
+    [cv('left-label-wrapper-height')]: px(leftLabelWrapperHeight),
   } as React.CSSProperties), [
     style,
     leftLabelWrapperHeight,
diff --git a/packages/bezier-react/src/components/Forms/SegmentedControl/SegmentedControl.styled.ts b/packages/bezier-react/src/components/Forms/SegmentedControl/SegmentedControl.styled.ts
@@ -29,22 +29,22 @@ export const paddingBySegmentedControlSize = {
 }
 
 export const Indicator = styled.div`
-  --bezier-react-segmented-control-indicator-translateX: none;
-  --bezier-react-segmented-control-indicator-left: auto;
-  --bezier-react-segmented-control-indicator-width: auto;
-  --bezier-react-segmented-control-indicator-height: auto;
+  --bezier-segmented-control-indicator-translateX: none;
+  --bezier-segmented-control-indicator-left: auto;
+  --bezier-segmented-control-indicator-width: auto;
+  --bezier-segmented-control-indicator-height: auto;
 
   position: absolute;
   top: 50%;
-  left: var(--bezier-react-segmented-control-indicator-left);
-  width: var(--bezier-react-segmented-control-indicator-width);
-  height: var(--bezier-react-segmented-control-indicator-height);
+  left: var(--bezier-segmented-control-indicator-left);
+  width: var(--bezier-segmented-control-indicator-width);
+  height: var(--bezier-segmented-control-indicator-height);
 
   ${({ foundation }) => foundation?.elevation.ev1()}
   /* NOTE: (@ed) Overrides the elevation mixin. Do not change the order! */
   background-color: var(--bg-white-high);
 
-  transform: translateX(var(--bezier-react-segmented-control-indicator-translateX)) translateY(-50%);
+  transform: translateX(var(--bezier-segmented-control-indicator-translateX)) translateY(-50%);
   ${({ foundation }) => foundation?.transition?.getTransitionsCSS('transform', TransitionDuration.M)}
 `
 
@@ -116,12 +116,12 @@ export const Item = styled.button`
 `
 
 export const Container = styled(AlphaStack).attrs({ direction: 'horizontal' })`
-  --bezier-react-segmented-control-width: auto;
+  --bezier-segmented-control-width: auto;
 
   position: relative;
   z-index: ${ZIndex.Base};
   box-sizing: border-box;
-  width: var(--bezier-react-segmented-control-width);
+  width: var(--bezier-segmented-control-width);
   background-color: var(--bg-black-lighter);
 
   &.${SegmentedControlSize.XS} {
diff --git a/packages/bezier-react/src/components/Forms/SegmentedControl/SegmentedControl.test.tsx b/packages/bezier-react/src/components/Forms/SegmentedControl/SegmentedControl.test.tsx
@@ -138,16 +138,16 @@ describe('SegmentedControl >', () => {
     describe('"radiogroup" type', () => {
       it('when changing the width property, the width style should be applied to the outer wrapper', () => {
         const { getByRole } = renderComponent({ type: 'radiogroup', width: '100%' })
-        expect(getByRole('radiogroup')).toHaveStyle('--bezier-react-segmented-control-width: 100%')
-        expect(getByRole('radiogroup')).toHaveStyle('width: var(--bezier-react-segmented-control-width)')
+        expect(getByRole('radiogroup')).toHaveStyle('--bezier-segmented-control-width: 100%')
+        expect(getByRole('radiogroup')).toHaveStyle('width: var(--bezier-segmented-control-width)')
       })
     })
 
     describe('"tabs" type', () => {
       it('when changing the width property, the width style should be applied to the outer wrapper', () => {
         const { getByRole } = renderComponent({ type: 'tabs', width: '100%' })
-        expect(getByRole('tablist')).toHaveStyle('--bezier-react-segmented-control-width: 100%')
-        expect(getByRole('tablist')).toHaveStyle('width: var(--bezier-react-segmented-control-width)')
+        expect(getByRole('tablist')).toHaveStyle('--bezier-segmented-control-width: 100%')
+        expect(getByRole('tablist')).toHaveStyle('width: var(--bezier-segmented-control-width)')
       })
     })
   })
@@ -313,9 +313,9 @@ describe('SegmentedControl >', () => {
 
       const indicator = getByTestId(SEGMENTED_CONTROL_INDICATOR_TEST_ID)
 
-      expect(indicator).toHaveStyle('width: var(--bezier-react-segmented-control-indicator-width)')
-      expect(indicator).toHaveStyle('height: var(--bezier-react-segmented-control-indicator-height)')
-      expect(indicator).toHaveStyle('transform: translateX(var(--bezier-react-segmented-control-indicator-translateX)) translateY(-50%)')
+      expect(indicator).toHaveStyle('width: var(--bezier-segmented-control-indicator-width)')
+      expect(indicator).toHaveStyle('height: var(--bezier-segmented-control-indicator-height)')
+      expect(indicator).toHaveStyle('transform: translateX(var(--bezier-segmented-control-indicator-translateX)) translateY(-50%)')
     })
   })
 
diff --git a/packages/bezier-react/src/components/Forms/SegmentedControl/SegmentedControl.tsx b/packages/bezier-react/src/components/Forms/SegmentedControl/SegmentedControl.tsx
@@ -8,6 +8,10 @@ import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
 import * as TabsPrimitive from '@radix-ui/react-tabs'
 import classNames from 'classnames'
 
+import {
+  cssVarName,
+  px,
+} from '~/src/utils/styleUtils'
 import { isNumber } from '~/src/utils/typeUtils'
 
 import { Divider } from '~/src/components/Divider'
@@ -34,6 +38,8 @@ import { SegmentedControlIndicator } from './SegmentedControlIndicator'
 
 import * as Styled from './SegmentedControl.styled'
 
+const cv = cssVarName('segmented-control')
+
 function SegmentedControlItemListImpl<
   Type extends SegmentedControlType,
   Value extends string,
@@ -62,7 +68,7 @@ function SegmentedControlItemListImpl<
 
   const style = useMemo(() => ({
     ...styleProp,
-    '--bezier-react-segmented-control-width': isNumber(width) ? `${width}px` : width,
+    [cv('width')]: isNumber(width) ? px(width) : width,
   } as React.CSSProperties), [
     styleProp,
     width,
diff --git a/packages/bezier-react/src/components/Forms/SegmentedControl/SegmentedControlIndicator.tsx b/packages/bezier-react/src/components/Forms/SegmentedControl/SegmentedControlIndicator.tsx
@@ -1,5 +1,10 @@
 import React from 'react'
 
+import {
+  cssVarName,
+  px,
+} from '~/src/utils/styleUtils'
+
 import { DIVIDER_THICKNESS } from '~/src/components/Divider'
 
 import {
@@ -9,6 +14,8 @@ import {
 
 import * as Styled from './SegmentedControl.styled'
 
+const cv = cssVarName('segmented-control-indicator')
+
 export const SEGMENTED_CONTROL_INDICATOR_TEST_ID = 'bezier-react-segmented-control-indicator'
 
 export function SegmentedControlIndicator() {
@@ -24,10 +31,10 @@ export function SegmentedControlIndicator() {
   const containerHorizontalPadding = `${2 * containerPadding}px`
 
   const style = {
-    '--bezier-react-segmented-control-indicator-translateX': `calc(${selectedItemIndex * 100}% + ${selectedItemIndex * DIVIDER_THICKNESS}px)`,
-    '--bezier-react-segmented-control-indicator-width': `calc((100% - ${dividerTotalWidth} - ${containerHorizontalPadding}) / ${itemCount})`,
-    '--bezier-react-segmented-control-indicator-height': `${containerHeight - (2 * containerPadding)}px`,
-    '--bezier-react-segmented-control-indicator-left': `${containerPadding}px`,
+    [cv('translateX')]: `calc(${selectedItemIndex * 100}% + ${selectedItemIndex * DIVIDER_THICKNESS}px)`,
+    [cv('width')]: `calc((100% - ${dividerTotalWidth} - ${containerHorizontalPadding}) / ${itemCount})`,
+    [cv('height')]: px(containerHeight - (2 * containerPadding)),
+    [cv('left')]: px(containerPadding),
   } as React.CSSProperties
 
   return (
diff --git a/packages/bezier-react/src/components/Forms/Slider/Slider.tsx b/packages/bezier-react/src/components/Forms/Slider/Slider.tsx
@@ -5,6 +5,10 @@ import React, {
 
 import * as SliderPrimitive from '@radix-ui/react-slider'
 
+import {
+  cssVarName,
+  px,
+} from '~/src/utils/styleUtils'
 import { isNumber } from '~/src/utils/typeUtils'
 
 import {
@@ -16,6 +20,8 @@ import type SliderProps from './Slider.types'
 
 import * as Styled from './Slider.styled'
 
+const cv = cssVarName('slider')
+
 export const SLIDER_TEST_ID = 'bezier-react-slider'
 
 const SliderGuide = memo<Record<'min' | 'max' | 'value', number>>(function SliderGuide({
@@ -26,7 +32,7 @@ const SliderGuide = memo<Record<'min' | 'max' | 'value', number>>(function Slide
   return (
     <Styled.SliderGuide
       style={{
-        '--bezier-slider-guide-left': `${(value / (max - min)) * 100}%`,
+        [cv('guide-left')]: `${(value / (max - min)) * 100}%`,
       } as React.CSSProperties}
     />
   )
@@ -100,7 +106,7 @@ export const Slider = forwardRef<HTMLSpanElement, SliderProps>(function Slider({
     <Styled.SliderPrimitiveRoot
       style={{
         ...style,
-        '--bezier-slider-width': isNumber(width) ? `${width}px` : width,
+        [cv('width')]: isNumber(width) ? px(width) : width,
       }}
       data-testid={SLIDER_TEST_ID}
       ref={forwardedRef}
diff --git a/packages/bezier-react/src/components/Modals/Modal/ModalContent.tsx b/packages/bezier-react/src/components/Modals/Modal/ModalContent.tsx
diff --git a/packages/bezier-react/src/components/Status/Status.tsx b/packages/bezier-react/src/components/Status/Status.tsx
diff --git a/packages/bezier-react/src/components/Tabs/TabList.tsx b/packages/bezier-react/src/components/Tabs/TabList.tsx
diff --git a/packages/bezier-react/src/utils/styleUtils.ts b/packages/bezier-react/src/utils/styleUtils.ts
