From e27f7057314070c4ac79e6e7c545b3fd7c712793 Mon Sep 17 00:00:00 2001
From: southclaws <south@cla.ws>
Date: Wed, 29 Nov 2023 16:08:09 +0000
Subject: [PATCH] remove chakra defaults and fix button/link styles by removing
 borders until chakra is gone

---
 web/src/app/providers.tsx                     |  23 +++-
 .../theme/components/Button/button.recipe.ts  |  12 +-
 .../theme/components/Input/input.recipe.ts    |   9 +-
 web/src/theme/components/Link/link.recipe.ts  |  13 ++-
 web/src/theme/index.ts                        | 107 ------------------
 5 files changed, 47 insertions(+), 117 deletions(-)
 delete mode 100644 web/src/theme/index.ts

diff --git a/web/src/app/providers.tsx b/web/src/app/providers.tsx
index e3dd9c879..2ea1833b8 100644
--- a/web/src/app/providers.tsx
+++ b/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}
diff --git a/web/src/theme/components/Button/button.recipe.ts b/web/src/theme/components/Button/button.recipe.ts
index 737eefda0..69ca078a7 100644
--- a/web/src/theme/components/Button/button.recipe.ts
+++ b/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",
diff --git a/web/src/theme/components/Input/input.recipe.ts b/web/src/theme/components/Input/input.recipe.ts
index e7d5c5e2d..9cc4e0757 100644
--- a/web/src/theme/components/Input/input.recipe.ts
+++ b/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: {
diff --git a/web/src/theme/components/Link/link.recipe.ts b/web/src/theme/components/Link/link.recipe.ts
index d3fd38dc4..2cd49850b 100644
--- a/web/src/theme/components/Link/link.recipe.ts
+++ b/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",
diff --git a/web/src/theme/index.ts b/web/src/theme/index.ts
deleted file mode 100644
index 20b90ce1b..000000000
--- a/web/src/theme/index.ts
+++ /dev/null
@@ -1,107 +0,0 @@
-import { extendTheme } from "@chakra-ui/react";
-
-import { colours as colors } from "./colours";
-
-const extended = extendTheme({
-  config: {
-    // TODO: dark mode
-    useSystemColorMode: false,
-    initialColorMode: "light",
-  },
-
-  // TODO: Persian, Arabic, Hebrew etc. layouts.
-  direction: "ltr",
-
-  breakpoints: {
-    base: "0em",
-    sm: "30em",
-    md: "48em",
-    lg: "62em",
-    xl: "80em",
-    "2xl": "96em",
-  },
-  radii: {
-    none: "0",
-    sm: "0.125rem",
-    base: "0.25rem",
-    md: "0.375rem",
-    lg: "0.5rem",
-    xl: "0.75rem",
-    "2xl": "1rem",
-    "3xl": "1.5rem",
-    full: "9999px",
-  },
-  blur: {
-    none: 0,
-    sm: "4px",
-    base: "8px",
-    md: "12px",
-    lg: "16px",
-    xl: "24px",
-    "2xl": "40px",
-    "3xl": "64px",
-  },
-  letterSpacings: {
-    tighter: "-0.05em",
-    tight: "-0.025em",
-    normal: "0",
-    wide: "0.025em",
-    wider: "0.05em",
-    widest: "0.1em",
-  },
-  lineHeights: {
-    "3": ".75rem",
-    "4": "1rem",
-    "5": "1.25rem",
-    "6": "1.5rem",
-    "7": "1.75rem",
-    "8": "2rem",
-    "9": "2.25rem",
-    "10": "2.5rem",
-    normal: "normal",
-    none: 1,
-    shorter: 1.25,
-    short: 1.375,
-    base: 1.5,
-    tall: 1.625,
-    taller: "2",
-  },
-  fontWeights: {
-    hairline: 100,
-    thin: 200,
-    light: 300,
-    normal: 400,
-    medium: 500,
-    semibold: 600,
-    bold: 700,
-    extrabold: 800,
-    black: 900,
-  },
-  fonts: {
-    heading:
-      '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-    body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-    mono: 'SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace',
-  },
-  fontSizes: {
-    "3xs": "0.45rem",
-    "2xs": "0.625rem",
-    xs: "0.75rem",
-    sm: "0.875rem",
-    md: "1rem",
-    lg: "1.125rem",
-    xl: "1.25rem",
-    "2xl": "1.5rem",
-    "3xl": "1.875rem",
-    "4xl": "2.25rem",
-    "5xl": "3rem",
-    "6xl": "3.75rem",
-    "7xl": "4.5rem",
-    "8xl": "6rem",
-    "9xl": "8rem",
-  },
-
-  colors,
-});
-
-export { extended };