Convert Caret to CSS modules

primer · Sep 25, 2024 · b403239 · b403239
1 parent 954170b
commit b403239
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 24 deletions.
diff --git a/packages/react/src/Caret.module.css b/packages/react/src/Caret.module.css
@@ -0,0 +1,13 @@
+.Caret {
+  position: absolute;
+  pointer-events: none;
+}
+
+:where(.Border) {
+  stroke: var(--borderColor-default);
+  stroke-width: var(--borderWidth-thin);
+}
+
+.Background {
+  fill: var(--bgColor-default);
+}
diff --git a/packages/react/src/Caret.tsx b/packages/react/src/Caret.tsx
@@ -1,7 +1,5 @@
 import React from 'react'
-import {ThemeContext} from 'styled-components'
-import {style} from 'styled-system'
-import type {Theme} from './ThemeProvider'
+import classes from './Caret.module.css'
 
 type Location =
   | 'top'
@@ -47,31 +45,15 @@ function getPosition(edge: Alignment, align: Alignment | undefined, spacing: num
   }
 }
 
-const getBg = style({prop: 'bg', key: 'colors'})
-const getBorderColor = style({prop: 'borderColor', key: 'colors'})
-const getBorderWidth = style({prop: 'borderWidth', key: 'borderWidths', scale: [0, 1]})
-
 export type CaretProps = {
   bg?: string
   borderColor?: string
   borderWidth?: string | number
   size?: number
   location?: Location
-  theme?: Theme
 }
 
 function Caret(props: CaretProps) {
-  const theme = React.useContext(ThemeContext)
-  const propsWithTheme = {
-    ...props,
-    bg: props.bg || 'canvas.default',
-    borderColor: props.borderColor || 'border.default',
-    borderWidth: props.borderWidth || 1,
-    theme: props.theme ?? theme,
-  }
-  const {bg} = getBg(propsWithTheme)
-  const {borderColor} = getBorderColor(propsWithTheme)
-  const {borderWidth} = getBorderWidth(propsWithTheme)
   const {size = 8, location = 'bottom'} = props
   const [edge, align] = getEdgeAlign(location)
   const perp = perpendicularEdge[edge]
@@ -98,9 +80,8 @@ function Caret(props: CaretProps) {
     <svg
       width={size * 2}
       height={size * 2}
+      className={classes.Caret}
       style={{
-        pointerEvents: 'none',
-        position: 'absolute',
         ...getPosition(edge, align, size),
         // if align is set (top|right|bottom|left),
         // then we don't need an offset margin
@@ -109,9 +90,17 @@ function Caret(props: CaretProps) {
       role="presentation"
     >
       <g transform={transform}>
-        <path d={triangle} fill={theme?.colors.canvas.default} />
-        <path d={triangle} fill={bg} />
-        <path d={line} fill="none" stroke={borderColor} strokeWidth={borderWidth} />
+        <path d={triangle} className={classes.Background} />
+        <path d={triangle} style={{fill: props.bg}} className={classes.Background} />
+        <path
+          d={line}
+          fill="none"
+          style={{
+            stroke: props.borderColor,
+            strokeWidth: props.borderWidth,
+          }}
+          className={classes.Border}
+        />
       </g>
     </svg>
   )