remove chakra defaults and fix button/link styles by removing borders…

… until chakra is gone

web/src/app/providers.tsx

@@ -1,11 +1,10 @@
 "use client";
 
 import { CacheProvider } from "@chakra-ui/next-js";
-import { ChakraProvider } from "@chakra-ui/react";
+import { ChakraProvider, extendTheme } from "@chakra-ui/react";
 import { PropsWithChildren } from "react";
 
 import { AuthProvider } from "src/auth/AuthProvider";
-import { extended } from "src/theme";
 
 // Force chakra to always be light mode - because we're removing it eventually.
 type ColourMode = "light" | "dark";
@@ -24,7 +23,25 @@ export function Providers({ children }: PropsWithChildren) {
   return (
     <CacheProvider>
       <ChakraProvider
-        theme={extended}
+        theme={extendTheme({
+          styles: {
+            // Remove the Chakra defaults - we don't need them with Panda.
+            // https://chakra-ui.com/docs/styled-system/global-styles#default-styles
+            global: {
+              body: {
+                fontFamily: "unset",
+                color: "unset",
+                bg: "unset",
+                lineHeight: "unset",
+              },
+
+              "*, *::before, &::after": {
+                borderColor: "unset",
+                wordWrap: "unset",
+              },
+            },
+          },
+        })}
         // We're not using Chakra's reset, instead we're using Panda CSS.
         resetCSS={false}
         colorModeManager={noopColourModeManager}

web/src/theme/components/Button/button.recipe.ts

@@ -18,6 +18,7 @@ export const button = defineRecipe({
     alignItems: "center",
     appearance: "none",
     borderRadius: "lg",
+    boxShadow: "xs",
     cursor: "pointer",
     display: "inline-flex",
     fontWeight: "semibold",
@@ -51,10 +52,13 @@ export const button = defineRecipe({
   variants: {
     kind: {
       neutral: {
-        borderWidth: "1px",
-        borderColor: "border.default",
+        // TODO: Add back when chakra is removed.
+        // borderWidth: "1px",
+        // borderColor: "border.default",
+        backgroundColor: "blackAlpha.100",
         _hover: {
           background: "gray.100",
+          boxShadow: "md",
         },
         _focusVisible: {
           outlineOffset: "2px",
@@ -71,6 +75,7 @@ export const button = defineRecipe({
         color: "accent.text.500",
         _hover: {
           backgroundColor: "accent.400",
+          boxShadow: "md",
         },
         _focusVisible: {
           outlineOffset: "2px",
@@ -87,6 +92,7 @@ export const button = defineRecipe({
         color: "accent.text.200",
         _hover: {
           backgroundColor: "gray.300",
+          boxShadow: "md",
         },
         _active: {
           backgroundColor: "gray.400",
@@ -98,6 +104,7 @@ export const button = defineRecipe({
         color: "white",
         _hover: {
           backgroundColor: "rose.500",
+          boxShadow: "md",
         },
         _active: {
           backgroundColor: "rose.700",
@@ -107,6 +114,7 @@ export const button = defineRecipe({
       ghost: {
         _hover: {
           backgroundColor: "gray.200",
+          boxShadow: "md",
         },
         _active: {
           backgroundColor: "gray.300",

web/src/theme/components/Input/input.recipe.ts

@@ -7,20 +7,25 @@ export const input = defineRecipe({
     backgroundColor: "whiteAlpha.600",
     borderColor: "blackAlpha.50",
     borderRadius: "lg",
-    borderWidth: "1px",
+    // TODO: Add back when chakra is removed.
+    // borderWidth: "1px",
+    boxShadow: "xs",
     outline: 0,
     position: "relative",
     transitionDuration: "normal",
     transitionProperty: "box-shadow, border-color",
     transitionTimingFunction: "default",
     width: "full",
+    _placeholderShown: {
+      color: "fg.subtle",
+    },
     _disabled: {
       opacity: 0.4,
       cursor: "not-allowed",
     },
     _focus: {
       borderColor: "border.accent",
-      boxShadow: "accent",
+      boxShadow: "md",
     },
   },
   defaultVariants: {

web/src/theme/components/Link/link.recipe.ts

@@ -6,6 +6,7 @@ export const link = defineRecipe({
     alignItems: "center",
     appearance: "none",
     borderRadius: "lg",
+    boxShadow: "xs",
     cursor: "pointer",
     display: "inline-flex",
     fontWeight: "semibold",
@@ -27,10 +28,13 @@ export const link = defineRecipe({
   variants: {
     kind: {
       neutral: {
-        borderWidth: "1px",
-        borderColor: "border.default",
+        // TODO: Add back when chakra is removed.
+        // borderWidth: "1px",
+        // borderColor: "border.default",
+        background: "blackAlpha.100",
         _hover: {
           background: "gray.100",
+          boxShadow: "md",
         },
         _focusVisible: {
           outlineOffset: "2px",
@@ -46,6 +50,7 @@ export const link = defineRecipe({
         color: "accent.text.500",
         _hover: {
           backgroundColor: "accent.400",
+          boxShadow: "md",
         },
         _focusVisible: {
           outlineOffset: "2px",
@@ -61,6 +66,7 @@ export const link = defineRecipe({
         color: "accent.text.200",
         _hover: {
           backgroundColor: "gray.300",
+          boxShadow: "md",
         },
         _active: {
           backgroundColor: "gray.400",
@@ -69,6 +75,7 @@ export const link = defineRecipe({
       ghost: {
         _hover: {
           backgroundColor: "gray.200",
+          boxShadow: "md",
         },
         _active: {
           backgroundColor: "gray.300",
@@ -81,7 +88,7 @@ export const link = defineRecipe({
         h: "6",
         minW: "8",
         textStyle: "xs",
-        px: "1",
+        px: "2",
         gap: "2",
         "& svg": {
           fontSize: "md",