chore: move global CSS into panda config

panda.config.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from '@pandacss/dev';
 
-import { leatherCss } from './src/app/components/global-styles/global-styles';
 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';
@@ -38,5 +38,5 @@ export default defineConfig({
   outdir: 'leather-styles',
   outExtension: 'js',
   minify: true,
-  globalCss: leatherCss,
+  globalCss,
 });

src/app/app.tsx

@@ -8,7 +8,6 @@ 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';
@@ -29,8 +28,6 @@ export function App() {
         {/* TODO - this works but investigate importing radixBaseCSS in panda layer config */}
         <ThemeProvider theme={theme} css={radixBaseCSS}>
           <ThemeSwitcherProvider>
-            {/* Remove stacks-ui reset - write our own */}
-            {/* <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}

src/app/components/global-styles/global-styles.tsx → theme/global/global.ts

@@ -1,32 +1,22 @@
-import { memo } from 'react';
-
 import { defineGlobalStyles } from '@pandacss/dev';
-import { CSSReset } from '@stacks/ui';
-import { token } from 'leather-styles/tokens';
 
 import { fullPageStyles } from './full-page-styles';
 import { popupCenterStyles } from './popup-center-styles';
 import { popupStyles } from './popup-styles';
 import { radixStyles, radixTabStyles } from './radix-styles';
 import { tippyStyles } from './tippy-styles';
 
-// Keeping this temporarily but it's not used anywhere
-// need to backfill some Stacks UI base - cursor pointer
 // ts-unused-exports:disable-next-line
-export const GlobalStyles = memo(() => {
-  return <>{CSSReset}</>;
-});
-
-export const leatherCss = defineGlobalStyles({
+export const globalCss = defineGlobalStyles({
   'html, body': {
-    backgroundColor: token('colors.brown.1'),
+    backgroundColor: 'accent.background-secondary',
   },
   button: {
     cursor: 'pointer',
   },
   '@media (min-width: 600px)': {
     'html, body': {
-      backgroundColor: token('colors.brown.2'),
+      backgroundColor: 'accent.background-secondary',
     },
   },
   body: {

theme/global/radix-styles.ts

@@ -0,0 +1,101 @@
+export const radixStyles = {
+  '.radix-themes': {
+    '--font-size-7': '32px',
+    '--font-size-8': '44px',
+    '--font-size-9': '53px',
+
+    '--default-font-family': '"Diatype", "Helvetica Neue", sans-serif',
+    '--heading-font-family': '"Marche", "Helvetica Neue", sans-serif',
+
+    '--letter-spacing-1': 0,
+    '--letter-spacing-2': 0,
+    '--letter-spacing-3': 0,
+    '--letter-spacing-4': 0,
+    '--letter-spacing-5': 0,
+    '--letter-spacing-6': 0,
+    '--letter-spacing-7': 0,
+    '--letter-spacing-8': 0,
+    '--letter-spacing-9': 0,
+
+    // Configured to Diatype
+    '--font-weight-light': 400,
+    '--font-weight-regular': 400,
+    '--font-weight-medium': 500,
+    '--font-weight-bold': 500,
+
+    '--color-overlay': 'rgba(0, 0, 0, 0.3)', //check this
+  },
+
+  // TODO check if these are being set properly
+  ':root, .light, .light-theme': {
+    '--brown-1': 'brown.1',
+    '--brown-2': 'brown.2',
+    '--brown-3': 'brown.3',
+    '--brown-4': 'brown.4',
+    '--brown-5': 'brown.5',
+    '--brown-6': 'brown.6',
+    '--brown-7': 'brown.7',
+    '--brown-8': 'brown.8',
+    '--brown-9': 'brown.9',
+    '--brown-10': 'brown.10',
+    '--brown-11': 'brown.11',
+    '--brown-12': 'brown.12',
+
+    '--gray-1': 'ink.1',
+    '--gray-2': 'ink.2',
+    '--gray-3': 'ink.3',
+    '--gray-4': 'ink.4',
+    '--gray-5': 'ink.5',
+    '--gray-6': 'ink.6',
+    '--gray-7': 'ink.7',
+    '--gray-8': 'ink.8',
+    '--gray-9': 'ink.9',
+    '--gray-10': 'ink.10',
+    '--gray-11': 'ink.11',
+    '--gray-12': 'ink.12',
+  },
+  '.dark, .dark-theme': {
+    '--brown-1': 'brown.1',
+    '--brown-2': 'brown.2',
+    '--brown-3': 'brown.3',
+    '--brown-4': 'brown.4',
+    '--brown-5': 'brown.5',
+    '--brown-6': 'brown.6',
+    '--brown-7': 'brown.7',
+    '--brown-8': 'brown.8',
+    '--brown-9': 'brown.9',
+    '--brown-10': 'brown.10',
+    '--brown-11': 'brown.11',
+    '--brown-12': 'brown.12',
+
+    '--gray-1': 'ink.1',
+    '--gray-2': 'ink.2',
+    '--gray-3': 'ink.3',
+    '--gray-4': 'ink.4',
+    '--gray-5': 'ink.5',
+    '--gray-6': 'ink.6',
+    '--gray-7': 'ink.7',
+    '--gray-8': 'ink.8',
+    '--gray-9': 'ink.9',
+    '--gray-10': 'ink.10',
+    '--gray-11': 'ink.11',
+    '--gray-12': 'ink.12',
+  },
+};
+
+// override the radix tabs color
+export const radixTabStyles = {
+  '.rt-TabsList.rt-r-size-2': {
+    height: 'auto',
+    '--tabs-trigger-inner-padding-y': 'spacing.space.04',
+  },
+  '.rt-TabsTrigger': {
+    flex: 1,
+  },
+  '.rt-TabsTriggerInner': {
+    width: '100%',
+  },
+  '.rt-TabsTrigger[data-state="active"]::before': {
+    backgroundColor: 'accent.text-primary',
+  },
+};

webpack/webpack.config.base.js

@@ -135,7 +135,7 @@ const config = {
       {
         test: /\.(ts|tsx)$/,
         exclude: /node_modules/,
-        // TODO investigate removing babel
+        // #4164 TODO investigate removing babel
         use: {
           loader: 'babel-loader',
           options: {