refactor(divider): use css variable instead of scss variable

channel-io · Dec 28, 2023 · 431bea4 · 431bea4
1 parent e8a2034
commit 431bea4
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 11 deletions.
diff --git 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
@@ -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],