From 7a3a653d669c32302238201229cf9ffc5dd4b4e4 Mon Sep 17 00:00:00 2001
From: Erin Hoops <erin.hoops@chanzuckerberg.com>
Date: Wed, 29 Nov 2023 10:49:13 -0800
Subject: [PATCH] style: use theme variables

---
 packages/components/src/core/InputCheckbox/styles.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/core/InputCheckbox/styles.ts b/packages/components/src/core/InputCheckbox/styles.ts
index 7341d6212..0dbc03a58 100644
--- a/packages/components/src/core/InputCheckbox/styles.ts
+++ b/packages/components/src/core/InputCheckbox/styles.ts
@@ -7,7 +7,9 @@ import { fontBodyXxs } from "../styles";
 import {
   CommonThemeProps,
   getColors,
+  getCorners,
   getIconSizes,
+  getSpaces,
   getTypography,
 } from "../styles/common/selectors/theme";
 
@@ -43,7 +45,9 @@ export const StyledFormControlLabel = styled(RawFormControlLabel)`
 export const StyledCheckbox = styled(RawCheckbox)`
   ${(props) => {
     const colors = getColors(props);
+    const corners = getCorners(props);
     const iconSizes = getIconSizes(props);
+    const spaces = getSpaces(props);
     return `
       color: ${colors?.gray[400]};
       &:hover {
@@ -69,8 +73,8 @@ export const StyledCheckbox = styled(RawCheckbox)`
           outline: 5px auto Highlight;
           outline: 5px auto -webkit-focus-ring-color;
         }
-        border-radius: 2px;
-        padding: 4px;
+        border-radius: ${corners?.s}px;        
+        padding: ${spaces?.xxs}px;
         margin: 3px;
       }