chore: remove emotion, configure panda to load css globally, ditch st…

…acks-ui base, #4164

package.json

@@ -127,10 +127,6 @@
   "dependencies": {
     "@bitcoinerlab/secp256k1": "1.0.2",
     "@coinbase/cbpay-js": "1.0.2",
-    "@emotion/core": "11.0.0",
-    "@emotion/css": "11.11.2",
-    "@emotion/react": "11.11.1",
-    "@emotion/styled": "11.11.0",
     "@fungible-systems/zone-file": "2.0.0",
     "@hirosystems/token-metadata-api-client": "1.1.0",
     "@ledgerhq/hw-transport-webusb": "6.27.16",
@@ -246,9 +242,6 @@
     "@babel/preset-react": "7.22.5",
     "@babel/preset-typescript": "7.22.11",
     "@btckit/types": "0.0.19",
-    "@emotion/babel-plugin": "11.11.0",
-    "@emotion/babel-preset-css-prop": "11.11.0",
-    "@emotion/cache": "11.11.0",
     "@ls-lint/ls-lint": "2.0.1",
     "@pandacss/dev": "0.12.0",
     "@playwright/test": "1.37.1",

panda.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from '@pandacss/dev';
 
 import { breakpoints } from './theme/breakpoints';
+import { globalCss } from './theme/global/global';
 import { keyframes } from './theme/keyframes';
 import { buttonRecipe } from './theme/recipes/button';
 import { semanticTokens } from './theme/semantic-tokens';
@@ -37,4 +38,5 @@ export default defineConfig({
   outdir: 'leather-styles',
   outExtension: 'js',
   minify: true,
+  globalCss,
 });

src/app/app.tsx

@@ -1,13 +1,13 @@
 import { Suspense } from 'react';
 import { Provider as ReduxProvider } from 'react-redux';
 
+import { radixBaseCSS } from '@radix-ui/themes/styles.css';
 import { ThemeProvider } from '@stacks/ui';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { PersistGate } from 'redux-persist/integration/react';
 
 import { queryClient } from '@app/common/persistence';
 import { theme } from '@app/common/theme';
-import { GlobalStyles } from '@app/components/global-styles/global-styles';
 import { FullPageLoadingSpinner } from '@app/components/loading-spinner';
 import { Devtools } from '@app/features/devtool/devtools';
 import { AppErrorBoundary } from '@app/features/errors/app-error-boundary';
@@ -25,9 +25,9 @@ export function App() {
     <ReduxProvider store={store}>
       <PersistGate loading={<FullPageLoadingSpinner />} persistor={persistor}>
         <HeadProvider />
-        <ThemeProvider theme={theme}>
+        {/* TODO - this works but investigate importing radixBaseCSS in panda layer config */}
+        <ThemeProvider theme={theme} css={radixBaseCSS}>
           <ThemeSwitcherProvider>
-            <GlobalStyles />
             <QueryClientProvider client={queryClient}>
               <Suspense fallback={<FullPageLoadingSpinner />}>
                 <AppErrorBoundary>

src/app/components/drawer/base-drawer.tsx

@@ -10,7 +10,6 @@ import { noop } from '@shared/utils';
 import { useOnClickOutside } from '@app/common/hooks/use-onclickoutside';
 import { useThemeSwitcher } from '@app/common/theme-provider';
 
-import { hideScrollbarClassName } from '../global-styles/hide-scrollbar';
 import { DrawerHeader } from './components/drawer-header';
 
 function useDrawer(isShowing: boolean, onClose: () => void, pause?: boolean) {
@@ -104,12 +103,13 @@ export const BaseDrawer = memo((props: BaseDrawerProps) => {
         maxHeight={['calc(100vh - 24px)', 'calc(100vh - 96px)']}
       >
         <Box
-          className={[
-            css({
-              overflowY: 'scroll',
-            }),
-            hideScrollbarClassName,
-          ].join(' ')}
+          css={css({
+            overflowY: 'scroll',
+
+            '&::-webkit-scrollbar': {
+              display: 'none',
+            },
+          })}
         >
           <DrawerHeader
             enableGoBack={enableGoBack}