From bccea52b034473a90569f1b054d5e496c3f5e223 Mon Sep 17 00:00:00 2001
From: Ash Keel <ash@nebula.cafe>
Date: Sat, 15 Jan 2022 11:53:55 +0100
Subject: [PATCH] Make checkboxes more like other UI elements

---
 frontend/src/ui/theme/forms.ts | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/frontend/src/ui/theme/forms.ts b/frontend/src/ui/theme/forms.ts
index 395d14e..50a85c4 100644
--- a/frontend/src/ui/theme/forms.ts
+++ b/frontend/src/ui/theme/forms.ts
@@ -259,19 +259,34 @@ export const Checkbox = styled(CheckboxPrimitive.Root, {
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  border: '1px solid $teal6',
-  backgroundColor: '$teal4',
+  border: '1px solid $gray6',
+  backgroundColor: '$gray4',
   '&:hover': {
-    backgroundColor: '$teal5',
+    borderColor: '$teal6',
+    backgroundColor: '$gray5',
   },
   '&:active': {
-    background: '$teal6',
+    background: '$gray6',
   },
   '&:disabled': {
     backgroundColor: '$gray4',
     borderColor: '$gray5',
     color: '$gray8',
   },
+  variants: {
+    variation: {
+      primary: {
+        border: '1px solid $teal6',
+        backgroundColor: '$teal4',
+        '&:hover': {
+          backgroundColor: '$teal5',
+        },
+        '&:active': {
+          background: '$teal6',
+        },
+      },
+    },
+  },
 });
 
 export const CheckboxIndicator = styled(CheckboxPrimitive.Indicator, {