Fix Checkbox

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

packages/canon/src/components/Checkbox/styles.css

@@ -18,6 +18,7 @@
     box-shadow: inset 0 0 0 1px var(--canon-outline);
     cursor: pointer;
     border-radius: 2px;
+    transition: all 0.2s ease-in-out;
 
     &[data-state='unchecked'] {
       & .checkbox-indicator {
@@ -36,4 +37,10 @@
     justify-content: center;
     color: var(--canon-text-primary-on-accent);
   }
+
+  &:hover {
+    & .checkbox {
+      box-shadow: inset 0 0 0 1px var(--canon-outline-hover);
+    }
+  }
 }

packages/canon/src/theme/theme.css

@@ -89,8 +89,8 @@
   --canon-surface-2: #1a1a1a;
 
   /* Outlines */
-  --canon-outline: rgba(255, 255, 255, 0.1);
-  --canon-outline-hover: rgba(255, 255, 255, 0.2);
+  --canon-outline: rgba(255, 255, 255, 0.2);
+  --canon-outline-hover: rgba(255, 255, 255, 0.4);
   --canon-outline-focus: #fff;
 
   /* States - Add more states */