refactor: simple migrations and tweaks to cuesheet

apps/client/src/common/components/buttons/Button.module.scss

@@ -20,6 +20,11 @@
     opacity: 0.4;
     cursor: not-allowed;
   }
+
+  &:focus-visible {
+    outline: 2px solid $blue-500;
+    outline-offset: 2px;
+  }
 }
 
 .small {

apps/client/src/common/components/checkbox/Checkbox.module.scss

@@ -0,0 +1,50 @@
+.checkbox {
+  box-sizing: border-box;
+  display: flex;
+  width: 1rem;
+  height: 1rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: $component-border-radius-sm;
+
+  &[data-unchecked] {
+    background-color: $gray-1100;
+
+    &:hover:not(:disabled) {
+      background: $gray-1000;
+    }
+    &:active:not(:disabled) {
+      background: $gray-1200;
+    }
+  }
+
+  &[data-checked] {
+    background-color: $blue-500;
+
+    &:hover:not(:disabled) {
+      background: $blue-400;
+    }
+    &:active:not(:disabled) {
+      background: $blue-600;
+    }
+  }
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  &:focus-visible {
+    outline: 2px solid $blue-500;
+    outline-offset: 2px;
+  }
+}
+
+.indicator {
+  display: flex;
+  color: $ui-white;
+
+  &[data-unchecked] {
+    display: none;
+  }
+}

apps/client/src/common/components/checkbox/Checkbox.tsx

@@ -0,0 +1,14 @@
+import { IoCheckmark } from 'react-icons/io5';
+import { Checkbox as BaseCheckbox } from '@base-ui-components/react/checkbox';
+
+import style from './Checkbox.module.scss';
+
+export default function Checkbox(checkboxProps: BaseCheckbox.Root.Props) {
+  return (
+    <BaseCheckbox.Root className={style.checkbox} {...checkboxProps}>
+      <BaseCheckbox.Indicator className={style.indicator}>
+        <IoCheckmark className={style.icon} />
+      </BaseCheckbox.Indicator>
+    </BaseCheckbox.Root>
+  );
+}

apps/client/src/common/components/input/input/Input.module.scss

@@ -1,7 +1,6 @@
 .input {
   box-sizing: border-box;
 
-  background-color: $gray-1200;
   font-size: 1rem;
   font-weight: 400;
   color: $gray-200;
@@ -31,6 +30,15 @@
   }
 }
 
+.subtle {
+  background-color: $gray-1200;
+}
+
+.ghosted {
+  background-color: transparent;
+  padding: 0;
+}
+
 .medium {
   height: 2rem;
 }

apps/client/src/common/components/input/input/Input.tsx

@@ -5,7 +5,7 @@ import { cx } from '../../../utils/styleUtils';
 import style from './Input.module.scss';
 
 export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
-  variant?: 'subtle';
+  variant?: 'subtle' | 'ghosted';
   height?: 'medium' | 'large';
   fluid?: boolean;
 }
@@ -20,6 +20,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
       type='text'
       autoCorrect='off'
       autoComplete='off'
+      spellCheck='false'
       className={cx([style.input, style[variant], style[height], fluid && style.fluid, className])}
       {...inputProps}
     />