Refactor: move theme from safe-react-components (safe-global#3038)

* Refactor: move theme from safe-react-components

* Prettier

* Lint

package.json

@@ -54,7 +54,6 @@
     "@safe-global/safe-ethers-lib": "^1.9.4",
     "@safe-global/safe-gateway-typescript-sdk": "^3.13.3",
     "@safe-global/safe-modules-deployments": "^1.2.0",
-    "@safe-global/safe-react-components": "^2.0.6",
     "@sentry/react": "^7.74.0",
     "@sentry/tracing": "^7.74.0",
     "@spindl-xyz/attribution-lite": "^1.4.0",

public/fonts/fonts.css

@@ -0,0 +1,13 @@
+@font-face {
+  font-family: 'DM Sans';
+  font-display: swap;
+  font-weight: 400;
+  src: url('/fonts/DMSansRegular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'DM Sans';
+  font-display: swap;
+  font-weight: bold;
+  src: url('/fonts/DMSans700.woff2') format('woff2');
+}

scripts/css-vars.ts

@@ -1,7 +1,7 @@
-import reactComponents from '@safe-global/safe-react-components'
+import lightPalette from '../src/components/theme/lightPalette'
+import darkPalette from '../src/components/theme/darkPalette'
 import spacings from '../src/styles/spacings.js'
 
-const { lightPalette, darkPalette } = reactComponents
 const cssVars: string[] = []
 Object.entries(lightPalette).forEach(([key, value]) => {
   Object.entries(value).forEach(([subKey, color]) => {

src/components/common/MetaTags/index.tsx

@@ -1,6 +1,7 @@
 import { IS_PRODUCTION } from '@/config/constants'
 import { ContentSecurityPolicy, StrictTransportSecurity } from '@/config/securityHeaders'
-import { lightPalette, darkPalette } from '@safe-global/safe-react-components'
+import lightPalette from '@/components/theme/lightPalette'
+import darkPalette from '@/components/theme/darkPalette'
 
 const descriptionText =
   'Safe (prev. Gnosis Safe) is the most trusted platform to manage digital assets on Ethereum and multiple EVMs. Over $40B secured.'

src/components/new-safe/CardStepper/index.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { Box } from '@mui/system'
-import { lightPalette } from '@safe-global/safe-react-components'
+import lightPalette from '@/components/theme/lightPalette'
 import css from './styles.module.css'
 import { Card, LinearProgress, CardHeader, Avatar, Typography, CardContent } from '@mui/material'
 import type { TxStepperProps } from './useCardStepper'

src/components/new-safe/create/steps/ReviewStep/index.tsx

@@ -2,7 +2,7 @@ import ErrorMessage from '@/components/tx/ErrorMessage'
 import useWalletCanPay from '@/hooks/useWalletCanPay'
 import { useMemo, useState } from 'react'
 import { Button, Grid, Typography, Divider, Box, Alert } from '@mui/material'
-import { lightPalette } from '@safe-global/safe-react-components'
+import lightPalette from '@/components/theme/lightPalette'
 import ChainIndicator from '@/components/common/ChainIndicator'
 import EthHashInfo from '@/components/common/EthHashInfo'
 import { useCurrentChain } from '@/hooks/useChains'

src/components/new-safe/create/steps/StatusStep/index.tsx

@@ -16,7 +16,7 @@ import { OPEN_SAFE_LABELS, OVERVIEW_EVENTS, trackEvent } from '@/services/analyt
 import { getRedirect } from '@/components/new-safe/create/logic'
 import layoutCss from '@/components/new-safe/create/styles.module.css'
 import { AppRoutes } from '@/config/routes'
-import { lightPalette } from '@safe-global/safe-react-components'
+import lightPalette from '@/components/theme/lightPalette'
 import { useCurrentChain } from '@/hooks/useChains'
 import { usePendingSafe } from './usePendingSafe'
 import useSyncSafeCreationStep from '../../useSyncSafeCreationStep'

src/components/safe-apps/SafeAppsInfoModal/UnknownAppWarning.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { Box, Checkbox, FormControlLabel, Typography } from '@mui/material'
 import WarningAmberOutlinedIcon from '@mui/icons-material/WarningAmberOutlined'
-import { lightPalette } from '@safe-global/safe-react-components'
+import lightPalette from '@/components/theme/lightPalette'
 import Domain from './Domain'
 
 type UnknownAppWarningProps = {

src/components/theme/SafeThemeProvider.tsx

@@ -0,0 +1,21 @@
+import { useMemo, type FC } from 'react'
+import { type PaletteMode, type Theme, ThemeProvider } from '@mui/material'
+import createSafeTheme from './safeTheme'
+
+// This component is necessary to make the theme available in the library components
+// Is not enough wrapping the client app with the regular ThemeProvider as the library components
+// are not aware of the theme context:
+// https://github.com/mui/material-ui/issues/32806
+// https://stackoverflow.com/questions/69072004/material-ui-theme-not-working-in-shared-component
+type SafeThemeProviderProps = {
+  children: (theme: Theme) => React.ReactNode
+  mode: PaletteMode
+}
+
+const SafeThemeProvider: FC<SafeThemeProviderProps> = ({ children, mode }) => {
+  const theme = useMemo(() => createSafeTheme(mode), [mode])
+
+  return <ThemeProvider theme={theme}>{children(theme)}</ThemeProvider>
+}
+
+export default SafeThemeProvider

src/components/theme/darkPalette.ts

@@ -0,0 +1,65 @@
+const darkPalette = {
+  text: {
+    primary: '#FFFFFF',
+    secondary: '#636669',
+    disabled: '#636669',
+  },
+  primary: {
+    dark: '#0cb259',
+    main: '#12FF80',
+    light: '#A1A3A7',
+  },
+  secondary: {
+    dark: '#636669',
+    main: '#FFFFFF',
+    light: '#12FF80',
+    background: '#303033',
+  },
+  border: {
+    main: '#636669',
+    light: '#303033',
+    background: '#121312',
+  },
+  error: {
+    dark: '#AC2C3B',
+    main: '#FF5F72',
+    light: '#FFB4BD',
+    background: '#2F2527',
+  },
+  success: {
+    dark: '#028D4C',
+    main: '#00B460',
+    light: '#81C784',
+    background: '#1F2920',
+  },
+  info: {
+    dark: '#52BFDC',
+    main: '#5FDDFF',
+    light: '#B7F0FF',
+    background: '#19252C',
+  },
+  warning: {
+    dark: '#CD674E',
+    main: '#FF8061',
+    light: '#FFB7A6',
+    background: '#2F2318',
+  },
+  background: {
+    default: '#121312',
+    main: '#121312',
+    paper: '#1C1C1C',
+    light: '#1B2A22',
+  },
+  backdrop: {
+    main: '#636669',
+  },
+  logo: {
+    main: '#FFFFFF',
+    background: '#303033',
+  },
+  static: {
+    main: '#121312',
+  },
+}
+
+export default darkPalette

src/components/theme/lightPalette.ts

@@ -0,0 +1,65 @@
+const lightPalette = {
+  text: {
+    primary: '#121312',
+    secondary: '#A1A3A7',
+    disabled: '#DDDEE0',
+  },
+  primary: {
+    dark: '#3c3c3c',
+    main: '#121312',
+    light: '#636669',
+  },
+  secondary: {
+    dark: '#0FDA6D',
+    main: '#12FF80',
+    light: '#B0FFC9',
+    background: '#EFFFF4',
+  },
+  border: {
+    main: '#A1A3A7',
+    light: '#DCDEE0',
+    background: '#F4F4F4',
+  },
+  error: {
+    dark: '#AC2C3B',
+    main: '#FF5F72',
+    light: '#FFB4BD',
+    background: '#FFE6EA',
+  },
+  success: {
+    dark: '#028D4C',
+    main: '#00B460',
+    light: '#72F5B8',
+    background: '#F2FFF9',
+  },
+  info: {
+    dark: '#52BFDC',
+    main: '#5FDDFF',
+    light: '#B7F0FF',
+    background: '#EFFCFF',
+  },
+  warning: {
+    dark: '#CD674E',
+    main: '#FF8061',
+    light: '#FFB7A6',
+    background: '#FFF0ED',
+  },
+  background: {
+    default: '#F4F4F4',
+    main: '#F4F4F4',
+    paper: '#FFFFFF',
+    light: '#EFFFF4',
+  },
+  backdrop: {
+    main: '#636669',
+  },
+  logo: {
+    main: '#121312',
+    background: '#EEEFF0',
+  },
+  static: {
+    main: '#121312',
+  },
+}
+
+export default lightPalette