first commit

src/renderer/components/checkbox-field/checkbox-field.css.ts

@@ -0,0 +1,40 @@
+import { SPACING_UNIT, vars } from "@renderer/theme.css";
+import { style } from "@vanilla-extract/css";
+
+export const checkboxField = style({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  gap: `${SPACING_UNIT}px`,
+  cursor: "pointer",
+});
+
+export const checkbox = style({
+  width: "20px",
+  height: "20px",
+  borderRadius: "4px",
+  backgroundColor: vars.color.darkBackground,
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  position: "relative",
+  transition: "all ease 0.2s",
+  border: `solid 1px ${vars.color.borderColor}`,
+  ":hover": {
+    borderColor: "rgba(255, 255, 255, 0.5)",
+  },
+});
+
+export const checkboxInput = style({
+  width: "100%",
+  height: "100%",
+  position: "absolute",
+  margin: "0",
+  padding: "0",
+  opacity: "0",
+  cursor: "pointer",
+});
+
+export const checkboxLabel = style({
+  cursor: "pointer",
+});