Dashed divider like figma

.changeset/chilly-cows-whisper.md

@@ -0,0 +1,5 @@
+---
+"@vygruppen/spor-react": minor
+---
+
+Update styling for dashed divider

packages/spor-react/src/theme/components/divider.ts

@@ -1,42 +1,47 @@
 import { defineStyleConfig } from "@chakra-ui/styled-system";
-import { mode, StyleFunctionProps } from "@chakra-ui/theme-tools";
+import { mode } from "@chakra-ui/theme-tools";
 
-const isSolid = (props: StyleFunctionProps) => props.variant === "solid";
-const isDashed = (props: StyleFunctionProps) => props.variant === "dashed";
+const borderColor = mode("blackAlpha.300", "whiteAlpha.300");
+
+function getSizes(size: string) {
+  const sizes: Record<string, { height: string; dash: string; gap: string }> = {
+    sm: {
+      height: "1px",
+      dash: "1px",
+      gap: "4px",
+    },
+    md: {
+      height: "2px",
+      dash: "3px",
+      gap: "6px",
+    },
+    lg: {
+      height: "3px",
+      dash: "3px",
+      gap: "9px",
+    },
+  };
+  return sizes[size] || sizes["md"];
+}
 
 export default defineStyleConfig({
   baseStyle: (props) => ({
-    borderColor: mode("blackAlpha.300", "whiteAlpha.300")(props),
+    borderColor: borderColor(props),
   }),
   variants: {
     solid: {
       borderStyle: "solid",
     },
-    dashed: (props) => ({
-      backgroundImage: `repeating-linear-gradient(90deg, ${mode("blackAlpha.300", "whiteAlpha.300")(props)}, ${mode("blackAlpha.300", "whiteAlpha.300")(props)} 4px, transparent 4px, transparent 10px)`,
-      backgroundPosition: "left bottom",
-      backgroundRepeat: "repeat-x",
-      backgroundSize: "100% 3px",
-      borderRadius:
-        props.size === "sm" ? "0.5px" : props.size === "md" ? "1px" : "1.5px",
-    }),
-  },
-  sizes: {
-    sm: (props) => ({
-      borderWidth: isSolid(props) ? "1px" : undefined,
-      borderRadius: isSolid(props) ? "0.5px" : undefined,
-      height: isDashed(props) ? "1px" : undefined,
-    }),
-    md: (props) => ({
-      borderWidth: isSolid(props) ? "2px" : undefined,
-      borderRadius: isSolid(props) ? "1px" : "10px",
-      height: isDashed(props) ? "2px" : undefined,
-    }),
-    lg: (props) => ({
-      borderWidth: isSolid(props) ? "3px" : undefined,
-      borderRadius: isSolid(props) ? "1.5px" : undefined,
-      height: isDashed(props) ? "3px" : undefined,
-    }),
+    dashed: (props) => {
+      const { height, dash, gap } = getSizes(props.size);
+      return {
+        height: height,
+        backgroundImage: `linear-gradient(90deg, ${borderColor(props)}, ${borderColor(props)} ${dash}, transparent ${dash}, transparent ${gap})`,
+        backgroundPosition: "left bottom",
+        backgroundRepeat: "repeat-x",
+        backgroundSize: `${gap} ${height}`,
+      };
+    },
   },
   defaultProps: {
     variant: "solid",