theme: improve input focus border on non-chrome browsers

We were using box-shadow previously to draw a fake border. While this worked
on Chrome-based browsers, it failed on Firefox & WebKit. This change uses
the outline property.

packages/theme/src/theme/variants/button.ts

@@ -104,13 +104,13 @@ const list: ThemeUIStyleObject = {
 const anchor: ThemeUIStyleObject = {
   variant: "buttons.default",
   color: "primary",
-  fontSize: "subBody",
   p: 0,
   m: 0,
   px: 0,
   py: 0,
+  textDecoration: "underline",
   ":hover": {
-    textDecoration: "underline"
+    color: "dimPrimary"
   }
 };
 

packages/theme/src/theme/variants/input.ts

@@ -22,18 +22,16 @@ import { ThemeUIStyleObject } from "@theme-ui/core";
 const defaultVariant: ThemeUIStyleObject = {
   borderRadius: "default",
   border: "none",
-  // borderColor: "border",
-  boxShadow: "0px 0px 0px 1px var(--border) inset",
+  outline: "1.5px solid var(--border)",
   fontFamily: "body",
   fontWeight: "body",
   fontSize: "input",
   color: "text",
-  outline: "none",
   ":focus": {
-    boxShadow: "0px 0px 0px 1.5px var(--primary) inset"
+    outline: "2px solid var(--primary)"
   },
   ":hover:not(:focus)": {
-    boxShadow: "0px 0px 0px 1px var(--dimPrimary) inset"
+    outline: "1.5px solid var(--dimPrimary)"
   }
 };