feat: create ui package

apps/evm/package.json

@@ -51,6 +51,7 @@
     "@sentry/vite-plugin": "^2.20.0",
     "@tanstack/react-query": "^5.48.0",
     "@venusprotocol/chains": "*",
+    "@venusprotocol/ui": "*",
     "@wagmi/core": "^2.16.4",
     "@yornaath/batshit": "^0.10.1",
     "bignumber.js": "^9.1.1",
@@ -167,15 +168,7 @@
     "whatwg-fetch": "^3.6.18"
   },
   "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+    "production": [">0.2%", "not dead", "not op_mini all"],
+    "development": ["last 1 chrome version", "last 1 firefox version", "last 1 safari version"]
   }
 }

apps/evm/src/App/index.tsx

@@ -4,10 +4,10 @@ import { Helmet } from 'react-helmet';
 import { HashRouter } from 'react-router-dom';
 
 import { queryClient } from 'clients/api';
+import { MuiThemeProvider } from 'containers/MuiThemeProvider';
 import { ErrorBoundary } from 'libs/errors';
 import { SentryErrorInfo } from 'libs/errors/SentryErrorInfo';
 import { Web3Wrapper } from 'libs/wallet';
-import { MuiThemeProvider } from 'theme/MuiThemeProvider';
 
 import { MAIN_PRODUCTION_HOST } from 'constants/production';
 import { ThemeHandler } from 'containers/ThemeHandler';

apps/evm/src/assets/styles/index.css

@@ -1,3 +1,6 @@
+@import '@venusprotocol/ui/fonts/proximaNova';
+@import '@venusprotocol/ui/theme';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -13,105 +16,8 @@
   }
 }
 
-@layer base {
-  :root {
-    /* The next colors are taken from the UI kit in Figma */
-    --color-background: 24 29 39;
-    --color-cards: 30 36 49;
-    --color-grey: 170 179 202;
-    --color-lightGrey: 45 53 73;
-    --color-green: 0 195 142;
-    --color-red: 233 61 102;
-    --color-offWhite: 255 255 255;
-    --color-orange: 245 120 66;
-    --color-yellow: 245 178 66;
-    --color-blue: 58 120 255;
-    /* The next colors are not in the UI kit, but are used throughout the designs */
-    --color-mediumBlue: 38 90 204;
-    --color-darkBlue: 27 67 152;
-  }
-
-  .unichain-theme {
-    /* The next colors are taken from the UI kit in Figma */
-    --color-background: 19 19 19;
-    --color-cards: 27 27 27;
-    --color-grey: 179 185 202;
-    --color-lightGrey: 46 46 46;
-    --color-blue: 245 13 180;
-    /* The next colors are not in the UI kit, but are used throughout the designs */
-    --color-mediumBlue: 198 7 145;
-    --color-darkBlue: 170 6 124;
-  }
-}
-
-@font-face {
-  font-family: 'ProximaNova';
-  src:
-    url('../fonts/proximaNova/proximaNovaRegularIt.woff2') format('woff2'),
-    url('../fonts/proximaNova/proximaNovaRegularIt.woff') format('woff'),
-    url('../fonts/proximaNova/proximaNovaRegularIt.ttf') format('truetype');
-  font-weight: normal;
-  font-style: italic;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'ProximaNova';
-  src:
-    url('../fonts/proximaNova/proximaNovaRegular.woff2') format('woff2'),
-    url('../fonts/proximaNova/proximaNovaRegular.woff') format('woff'),
-    url('../fonts/proximaNova/proximaNovaRegular.ttf') format('truetype');
-  font-weight: normal;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'ProximaNova';
-  src:
-    url('../fonts/proximaNova/proximaNovaSemiboldIt.woff2') format('woff2'),
-    url('../fonts/proximaNova/proximaNovaSemiboldIt.woff') format('woff'),
-    url('../fonts/proximaNova/proximaNovaSemiboldIt.ttf') format('truetype');
-  font-weight: 600;
-  font-style: italic;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'ProximaNova';
-  src:
-    url('../fonts/proximaNova/proximaNovaSemibold.woff2') format('woff2'),
-    url('../fonts/proximaNova/proximaNovaSemibold.woff') format('woff'),
-    url('../fonts/proximaNova/proximaNovaSemibold.ttf') format('truetype');
-  font-weight: 600;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'ProximaNova';
-  src:
-    url('../fonts/proximaNova/proximaNovaBold.woff2') format('woff2'),
-    url('../fonts/proximaNova/proximaNovaBold.woff') format('woff'),
-    url('../fonts/proximaNova/proximaNovaBold.ttf') format('truetype');
-  font-weight: bold;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'ProximaNova';
-  src:
-    url('../fonts/proximaNova/proximaNovaBoldIt.woff2') format('woff2'),
-    url('../fonts/proximaNova/proximaNovaBoldIt.woff') format('woff'),
-    url('../fonts/proximaNova/proximaNovaBoldIt.ttf') format('truetype');
-  font-weight: bold;
-  font-style: italic;
-  font-display: swap;
-}
-
 body {
-  font-family: 'ProximaNova', sans-serif;
+  font-family: var(--font-proxima-nova), sans-serif;
   background-color: theme('colors.background');
   color: theme('colors.offWhite');
 }

apps/evm/src/components/ActiveVotingProgress/index.tsx

@@ -2,8 +2,8 @@
 import { BigNumber } from 'bignumber.js';
 import { useMemo } from 'react';
 
+import { theme } from '@venusprotocol/ui';
 import { useTranslation } from 'libs/translations';
-import { theme } from 'theme';
 import type { Token } from 'types';
 import { convertMantissaToTokens } from 'utilities';
 

apps/evm/src/components/ApprovalSteps/index.tsx

@@ -3,8 +3,8 @@ import { Typography } from '@mui/material';
 
 import { handleError } from 'libs/errors';
 
+import { PrimaryButton } from '@venusprotocol/ui';
 import { InfoIcon } from 'components/InfoIcon';
-import { PrimaryButton } from '../Button';
 import { useStyles } from './styles';
 
 export interface ApprovalStepsProps {

apps/evm/src/components/ButtonGroup/index.tsx

@@ -1,5 +1,5 @@
 /** @jsxImportSource @emotion/react */
-import { TertiaryButton } from '../Button';
+import { TertiaryButton } from '@venusprotocol/ui';
 import { useStyles } from './styles';
 
 export interface ButtonGroupProps {

apps/evm/src/components/EllipseAddress/types.ts

@@ -1,3 +1,3 @@
-import type { BREAKPOINTS } from 'theme/MuiThemeProvider/muiTheme';
+import type { BREAKPOINTS } from 'containers/MuiThemeProvider/muiTheme';
 
 export type Breakpoint = keyof typeof BREAKPOINTS.values;

apps/evm/src/components/Notice/index.tsx

@@ -1,8 +1,7 @@
 import { cn } from 'utilities';
 
-import { TextButton } from '../Button';
+import { Spinner, TextButton } from '@venusprotocol/ui';
 import { Icon, type IconName } from '../Icon';
-import { Spinner } from '../Spinner';
 import type { NoticeProps, NoticeVariant } from './types';
 
 export * from './types';

apps/evm/src/components/Pagination/index.stories.tsx

@@ -2,7 +2,7 @@
 import type { Meta, StoryFn } from '@storybook/react';
 import noop from 'noop-ts';
 
-import { PALETTE } from 'theme/MuiThemeProvider/muiTheme';
+import { PALETTE } from 'containers/MuiThemeProvider/muiTheme';
 
 import { Pagination } from '.';
 

apps/evm/src/components/Pagination/index.tsx

@@ -2,7 +2,7 @@
 import Typography from '@mui/material/Typography';
 import type { ReactElement } from 'react';
 
-import { Button } from '../Button';
+import { Button } from '@venusprotocol/ui';
 import { Icon, type IconProps } from '../Icon';
 import { useStyles } from './styles';
 import { usePagination } from './usePagination';

apps/evm/src/components/ProgressBar/index.tsx

@@ -4,7 +4,7 @@ import MaterialSlider from '@mui/material/Slider';
 import type { SliderTypeMap } from '@mui/material/Slider/Slider';
 import { useCallback } from 'react';
 
-import { PALETTE } from 'theme/MuiThemeProvider/muiTheme';
+import { PALETTE } from 'containers/MuiThemeProvider/muiTheme';
 
 import { Tooltip, type TooltipProps } from '../Tooltip';
 import { useStyles } from './styles';

apps/evm/src/components/Select/index.tsx

@@ -2,7 +2,7 @@ import { forwardRef, useCallback, useMemo } from 'react';
 
 import { Dropdown } from '../Dropdown';
 
-import { Button } from 'components/Button';
+import { Button } from '@venusprotocol/ui';
 import { cn } from 'utilities';
 import { renderLabel } from '../Dropdown/renderLabel';
 import { Icon } from '../Icon';

apps/evm/src/components/SelectTokenTextField/TokenList/index.tsx

@@ -7,7 +7,7 @@ import { useTranslation } from 'libs/translations';
 import type { Token, TokenBalance } from 'types';
 import { cn, convertMantissaToTokens } from 'utilities';
 
-import { SenaryButton } from '../../Button';
+import { SenaryButton } from '@venusprotocol/ui';
 import { TextField } from '../../TextField';
 import { useStyles as useParentStyles } from '../styles';
 import { getTokenListItemTestId } from '../testIdGetters';

apps/evm/src/components/SelectTokenTextField/index.tsx

@@ -5,7 +5,7 @@ import { useState } from 'react';
 import { TokenIconWithSymbol } from 'components/TokenIconWithSymbol';
 import type { Token, TokenBalance } from 'types';
 
-import { TertiaryButton } from '../Button';
+import { TertiaryButton } from '@venusprotocol/ui';
 import { Icon } from '../Icon';
 import { TokenTextField, type TokenTextFieldProps } from '../TokenTextField';
 import TokenList from './TokenList';

apps/evm/src/components/SpendingLimit/index.tsx

@@ -1,14 +1,14 @@
 import type BigNumber from 'bignumber.js';
 
+import { Spinner } from '@venusprotocol/ui';
 import { LabeledInlineContent } from 'components/LabeledInlineContent';
-import { Spinner } from 'components/Spinner';
 import useFormatTokensToReadableValue from 'hooks/useFormatTokensToReadableValue';
 import { handleError } from 'libs/errors';
 import { useTranslation } from 'libs/translations';
 import type { Token } from 'types';
 
+import { TextButton } from '@venusprotocol/ui';
 import { InfoIcon } from 'components/InfoIcon';
-import { TextButton } from '../Button';
 
 export interface SpendingLimitProps {
   token: Token;

apps/evm/src/components/Table/TableCards.tsx

@@ -2,7 +2,7 @@
 import { Typography } from '@mui/material';
 import { useMemo } from 'react';
 
-import { Spinner } from 'components/Spinner';
+import { Spinner } from '@venusprotocol/ui';
 import { Link } from 'containers/Link';
 import { useTranslation } from 'libs/translations';
 

apps/evm/src/components/Table/index.tsx

@@ -9,8 +9,8 @@ import { Link } from 'react-router-dom';
 
 import { useFormatTo } from 'hooks/useFormatTo';
 
+import { Spinner } from '@venusprotocol/ui';
 import { Card } from '../Card';
-import { Spinner } from '../Spinner';
 import Head from './Head';
 import TableCards from './TableCards';
 import { useStyles } from './styles';

apps/evm/src/components/Table/styles.ts

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import { useTheme } from '@mui/material';
 
-import type { BREAKPOINTS } from 'theme/MuiThemeProvider/muiTheme';
+import type { BREAKPOINTS } from 'containers/MuiThemeProvider/muiTheme';
 
 export const useStyles = () => {
   const theme = useTheme();

apps/evm/src/components/Table/types.ts

@@ -1,5 +1,5 @@
 import type { CardProps } from 'components/Card';
-import type { BREAKPOINTS } from 'theme/MuiThemeProvider/muiTheme';
+import type { BREAKPOINTS } from 'containers/MuiThemeProvider/muiTheme';
 
 export interface TableColumn<R> {
   key: string;

apps/evm/src/components/TagGroup/index.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta } from '@storybook/react';
 import { State } from 'react-powerplug';
 
-import { PALETTE } from 'theme/MuiThemeProvider/muiTheme';
+import { PALETTE } from 'containers/MuiThemeProvider/muiTheme';
 
 import { TagGroup } from '.';
 

apps/evm/src/components/TagGroup/index.tsx

@@ -2,7 +2,7 @@ import type { ReactElement } from 'react';
 
 import { cn } from 'utilities';
 
-import { QuinaryButton } from '../Button';
+import { QuinaryButton } from '@venusprotocol/ui';
 
 export interface Tag {
   content: string | number | ReactElement;

apps/evm/src/components/TokenTextField/index.tsx

@@ -4,7 +4,7 @@ import { forwardRef, useMemo } from 'react';
 
 import type { Token } from 'types';
 
-import { type ButtonProps, TertiaryButton } from '../Button';
+import { type ButtonProps, TertiaryButton } from '@venusprotocol/ui';
 import { TextField, type TextFieldProps } from '../TextField';
 
 export interface RightMaxButton extends Omit<ButtonProps, 'variant' | 'children' | 'small'> {

apps/evm/src/components/charts/ApyChart/styles.ts

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import { useTheme } from '@mui/material';
 
-import { SPACING } from 'theme/MuiThemeProvider/muiTheme';
+import { SPACING } from 'containers/MuiThemeProvider/muiTheme';
 
 export const useStyles = () => {
   const theme = useTheme();

apps/evm/src/components/charts/InterestRateChart/styles.ts

@@ -2,7 +2,7 @@ import { css } from '@emotion/react';
 import { useTheme } from '@mui/material';
 import type { ReferenceLine } from 'recharts';
 
-import { SPACING } from 'theme/MuiThemeProvider/muiTheme';
+import { SPACING } from 'containers/MuiThemeProvider/muiTheme';
 
 export const useStyles = () => {
   const theme = useTheme();

apps/evm/src/components/charts/styles.ts

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import { useTheme } from '@mui/material';
 
-import { SPACING } from 'theme/MuiThemeProvider/muiTheme';
+import { SPACING } from 'containers/MuiThemeProvider/muiTheme';
 
 export const useStyles = () => {
   const theme = useTheme();