From 431bea4ede45813bc7f6e9cc5a4f6408b3f6776c Mon Sep 17 00:00:00 2001
From: andrew <andrew@channel.io>
Date: Thu, 28 Dec 2023 14:07:37 +0900
Subject: [PATCH] refactor(divider): use css variable instead of scss variable

---
 .../src/components/Divider/Divider.module.scss  | 17 ++++++++---------
 .../src/components/Divider/Divider.tsx          | 10 ++++++++--
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/packages/bezier-react/src/components/Divider/Divider.module.scss b/packages/bezier-react/src/components/Divider/Divider.module.scss
index 514efa1cc4..c45a1a0bb3 100644
--- a/packages/bezier-react/src/components/Divider/Divider.module.scss
+++ b/packages/bezier-react/src/components/Divider/Divider.module.scss
@@ -1,15 +1,14 @@
 @layer components {
-  $DIVIDER_THICKNESS: 1;
-  $DIVIDER_INDENT_SIZE: 6;
-
   .Divider {
+    --b-divider-indent-size: 6px;
+
     border-radius: var(--radius-1);
     background-color: var(--bdr-black-light);
 
     &.horizontal {
-      width: calc(100% - 2 * #{$DIVIDER_INDENT_SIZE}px);
-      height: #{$DIVIDER_THICKNESS}px;
-      margin: #{$DIVIDER_INDENT_SIZE}px;
+      width: calc(100% - 2 * var(--b-divider-indent-size));
+      height: var(--b-divider-thickness);
+      margin: var(--b-divider-indent-size);
 
       &.without-indent {
         width: 100%;
@@ -27,9 +26,9 @@
     }
 
     &.vertical {
-      width: #{$DIVIDER_THICKNESS}px;
-      height: calc(100% - 2 * #{$DIVIDER_INDENT_SIZE}px);
-      margin: #{$DIVIDER_INDENT_SIZE}px;
+      width: var(--b-divider-thickness);
+      height: calc(100% - 2 * var(--b-divider-indent-size));
+      margin: var(--b-divider-indent-size);
 
       &.without-indent {
         height: 100%;
diff --git a/packages/bezier-react/src/components/Divider/Divider.tsx b/packages/bezier-react/src/components/Divider/Divider.tsx
index 12d619c1fd..a14639f026 100644
--- a/packages/bezier-react/src/components/Divider/Divider.tsx
+++ b/packages/bezier-react/src/components/Divider/Divider.tsx
@@ -1,4 +1,7 @@
-import React, { forwardRef } from 'react'
+import React, {
+  type CSSProperties,
+  forwardRef,
+} from 'react'
 
 import * as SeparatorPrimitive from '@radix-ui/react-separator'
 import classNames from 'classnames'
@@ -42,7 +45,10 @@ export const Divider = forwardRef<HTMLDivElement, DividerProps>(({
     <div
       ref={forwardedRef}
       data-testid={testId}
-      style={style}
+      style={{
+        '--b-divider-thickness': `${DIVIDER_THICKNESS}px`,
+        ...style,
+      } as CSSProperties}
       className={classNames(
         styles.Divider,
         styles[orientation],