@rango-dev/ui 0.17.1-next.7 → 0.17.1-next.9

package/dist/widget/ui/src/components/StepDetail/StepDetail.d.ts

@@ -1,4 +1,5 @@
-import React, { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
+import React from 'react';
 export interface PropTypes {
     logo: string;
     chainLogo: string;

package/dist/widget/ui/src/components/StepDetail/StepDetail.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StepDetail.d.ts","sourceRoot":"","sources":["../../../../../../src/components/StepDetail/StepDetail.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAgFjD,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,iBAAiB,CAAC,SAAS,CAAC,qBAkD7D"}
+{"version":3,"file":"StepDetail.d.ts","sourceRoot":"","sources":["../../../../../../src/components/StepDetail/StepDetail.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAiF1B,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,iBAAiB,CAAC,SAAS,CAAC,qBAkD7D"}

package/dist/widget/ui/src/components/SvgIcon/SvgIcon.style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SvgIcon.style.d.ts","sourceRoot":"","sources":["../../../../../../src/components/SvgIcon/SvgIcon.style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAoCvB,CAAC"}
+{"version":3,"file":"SvgIcon.style.d.ts","sourceRoot":"","sources":["../../../../../../src/components/SvgIcon/SvgIcon.style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAgCvB,CAAC"}

package/dist/widget/ui/src/components/Wallet/Content.d.ts

@@ -1,5 +1,5 @@
+import type { ContentProps } from './Wallet.types';
 import React from 'react';
-import { ContentProps } from './Wallet.types';
 declare function Content(props: ContentProps): React.JSX.Element;
 export default Content;
 //# sourceMappingURL=Content.d.ts.map

package/dist/widget/ui/src/components/Wallet/Content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Content.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Wallet/Content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAK9C,iBAAS,OAAO,CAAC,KAAK,EAAE,YAAY,qBAuBnC;AAED,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Content.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Wallet/Content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEnD,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,iBAAS,OAAO,CAAC,KAAK,EAAE,YAAY,qBAuBnC;AAED,eAAe,OAAO,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.17.1-next.7",
+  "version": "0.17.1-next.9",
   "license": "MIT",
   "type": "module",
   "module": "./dist/index.js",
@@ -63,7 +63,7 @@
     "@radix-ui/react-radio-group": "^1.1.1",
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-tooltip": "^1.0.2",
-    "@rango-dev/wallets-shared": "^0.17.0",
+    "@rango-dev/wallets-shared": "^0.17.1-next.0",
     "@stitches/react": "^1.2.8",
     "rango-sdk": "^0.1.35",
     "react-virtualized-auto-sizer": "^1.0.7",

package/src/components/Alert/Alert.styles.ts

@@ -20,9 +20,9 @@ export const Container = styled('div', {
     paddingLeft: '$24',
   },
   '.description': {
-    $$color: '$colors$neutral900',
+    $$color: '$colors$neutral700',
     [`.${darkTheme} &`]: {
-      $$color: '$colors$neutral800',
+      $$color: '$colors$neutral600',
     },
     color: '$$color',
     fontSize: '$10',

package/src/components/BestRoute/BestRoute.tsx

@@ -71,7 +71,7 @@ export function BestRoute(props: BestRouteProps) {
                 } ${steps[steps.length - 1].to.token.displayName}`}
               </Typography>
               <Typography
-                color="$neutral800"
+                color="$neutral600"
                 ml={2}
                 size="xsmall"
                 variant="body">

package/src/components/BestRoute/BestRouteSkeleton.styles.ts

@@ -47,7 +47,7 @@ export const Container = styled('div', {
   '& .route-summary__separator': {
     height: '$28',
     marginLeft: '13px',
-    borderLeft: '1px solid $neutral900',
+    borderLeft: '1px solid $neutral700',
   },
   '& .token-amount': {
     display: 'flex',

package/src/components/BottomLogo/BottomLogo.tsx

@@ -10,7 +10,7 @@ import { Container, StyledAnchor } from './BottomLogo.styles';
 export function BottomLogo() {
   return (
     <Container>
-      <Typography variant="body" size="xsmall" color="$neutral900">
+      <Typography variant="body" size="xsmall" color="$neutral700">
         {i18n.t('Powered By')}
       </Typography>
       <Divider direction="horizontal" size={8} />
@@ -18,7 +18,7 @@ export function BottomLogo() {
         <Logo size={16} color="gray" />
         <Divider direction="horizontal" size={4} />
 
-        <Typography variant="body" size="xsmall" color="neutral900">
+        <Typography variant="body" size="xsmall" color="neutral700">
           RANGO
         </Typography>
       </StyledAnchor>

package/src/components/Button/Button.styles.tsx

@@ -61,7 +61,7 @@ export const ButtonBase = styled('button', {
           [`.${darkTheme} &`]: {
             $$color: '$colors$foreground',
           },
-          backgroundColor: '$neutral800',
+          backgroundColor: '$neutral600',
           color: '$$color',
           pointerEvents: 'none',
         },
@@ -80,16 +80,16 @@ export const ButtonBase = styled('button', {
           outline: 0,
         },
         '&:disabled': {
-          borderColor: '$neutral800',
-          color: '$neutral800',
+          borderColor: '$neutral600',
+          color: '$neutral600',
           pointerEvents: 'none',
         },
       },
       ghost: {
         backgroundColor: 'transparent',
-        color: '$neutral900',
+        color: '$neutral700',
         '&:disabled': {
-          color: '$neutral800',
+          color: '$neutral600',
           pointerEvents: 'none',
         },
         '&:focus-visible': {
@@ -140,7 +140,7 @@ export const ButtonBase = styled('button', {
           [`.${darkTheme} &`]: {
             $$color: '$colors$foreground',
           },
-          background: '$neutral800',
+          background: '$neutral600',
           color: '$$color',
           pointerEvents: 'none',
         },

package/src/components/Checkbox/Checkbox.styles.ts

@@ -13,7 +13,7 @@ export const CheckboxRoot = styled(RadixCheckbox.Root, {
   width: '1rem',
   height: '1rem',
   padding: 0,
-  border: '1px solid $neutral800',
+  border: '1px solid $neutral600',
   backgroundColor: 'transparent',
   cursor: 'pointer',
   '&[data-state="checked"]': {

package/src/components/Chip/Chip.tsx

@@ -12,7 +12,7 @@ export function Chip(props: PropTypes) {
     <ChipContainer selected={selected} {...otherProps}>
       {prefix || null}
       <Typography
-        color={!selected ? 'neutral900' : undefined}
+        color={!selected ? 'neutral700' : undefined}
         variant="body"
         size="medium">
         {label}

package/src/components/LiquiditySourceList/LiquiditySourceList.tsx

@@ -111,7 +111,7 @@ export function LiquiditySourceList(props: PropTypes) {
           <Typography variant="title" size="xmedium">
             {i18n.t('Bridges')}
           </Typography>
-          <Typography variant="body" size="medium" color="neutral800">
+          <Typography variant="body" size="medium" color="neutral600">
             {totalSelectedBridges === totalBridges
               ? totalBridges
               : `${totalSelectedBridges} / ${totalBridges}`}
@@ -150,7 +150,7 @@ export function LiquiditySourceList(props: PropTypes) {
           <Typography variant="title" size="xmedium">
             {i18n.t('Exchanges')}
           </Typography>
-          <Typography variant="body" size="medium" color="neutral800">
+          <Typography variant="body" size="medium" color="neutral600">
             {totalSelectedExchanges === totalExchanges
               ? totalExchanges
               : `${totalSelectedExchanges} / ${totalExchanges}`}

package/src/components/ListItem/ListItem.tsx

@@ -16,7 +16,7 @@ function ListItem(props: ListItemProps) {
       <div className="item-text-container">
         {title && <div className="item-text-title">{title}</div>}
         {description && (
-          <Typography variant="body" size="small" color="neutral800">
+          <Typography variant="body" size="small" color="neutral600">
             {description}
           </Typography>
         )}

package/src/components/MessageBox/DefaultMessageBox.tsx

@@ -27,7 +27,7 @@ export function MessageBox(props: PropsWithChildren<PropTypes>) {
       <Divider size={16} />
       <Description>
         {typeof description === 'string' ? (
-          <Typography color="neutral900" variant="body" size="medium">
+          <Typography color="neutral700" variant="body" size="medium">
             {description}
           </Typography>
         ) : (

package/src/components/NotFound/NotFound.tsx

@@ -16,7 +16,7 @@ export function NotFound(props: PropTypes) {
       <Typography variant="title" size="medium">
         {props.title}
       </Typography>
-      <Typography variant="body" size="medium" color="neutral900">
+      <Typography variant="body" size="medium" color="neutral700">
         {props.description}
       </Typography>
     </Container>

package/src/components/PriceImpact/PriceImpact.tsx

@@ -9,7 +9,7 @@ import { Container } from './PriceImpact.styles';
 export function PriceImpact(props: PriceImpactProps) {
   const { size, outputUsdValue, percentageChange, warningLevel, error } = props;
 
-  let percentageChangeColor = '$neutral900';
+  let percentageChangeColor = '$neutral700';
   if (!outputUsdValue || warningLevel === 'low') {
     percentageChangeColor = '$warning500';
   } else if (warningLevel === 'high') {
@@ -22,7 +22,7 @@ export function PriceImpact(props: PriceImpactProps) {
         <Typography
           size={size === 'small' ? 'small' : 'medium'}
           variant="body"
-          color={size !== 'small' ? '$neutral800' : '$neutral900'}>
+          color={size !== 'small' ? '$neutral600' : '$neutral700'}>
           {`~$${outputUsdValue}`}
         </Typography>
       )}

package/src/components/Radio/Radio.styles.tsx

@@ -9,7 +9,7 @@ export const StyledItem = styled(Radio.Item, {
   borderRadius: '100%',
   cursor: 'pointer',
   backgroundColor: 'transparent',
-  border: '1px solid $neutral800',
+  border: '1px solid $neutral600',
 
   '&[data-state="checked"]': {
     $$color: '$colors$secondary500',

package/src/components/RoutesOverview/RoutesOverview.tsx

@@ -13,7 +13,7 @@ export const Container = styled('div', {
   padding: '$8',
   borderRadius: '$xs',
   backgroundColor: '$background',
-  color: '$neutral800',
+  color: '$neutral600',
   fontSize: '$12',
 
   '.routes': {

package/src/components/StepDetail/StepDetail.tsx

@@ -1,4 +1,7 @@
-import React, { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
+
+import React from 'react';
+
 import { styled } from '../../theme';
 import { Typography } from '../Typography';
 
@@ -74,7 +77,7 @@ const Detail = styled('div', {
   },
 });
 const SubTitle = styled(Typography, {
-  color: '$neutral600',
+  color: '$neutral800',
   display: 'block',
   paddingLeft: '$8',
 });
@@ -122,7 +125,7 @@ export function StepDetail(props: PropsWithChildren<PropTypes>) {
             noWrap
             variant={direction === 'vertical' ? 'body' : 'title'}
             size="medium"
-            color={'$neutral600'}>
+            color={'$neutral800'}>
             {estimatedAmount}
           </Typography>
         )}
@@ -133,7 +136,7 @@ export function StepDetail(props: PropsWithChildren<PropTypes>) {
           noWrap>
           {symbol}
         </Typography>
-        <SubTitle noWrap variant="body" size="xsmall" color="$neutral800">
+        <SubTitle noWrap variant="body" size="xsmall" color="$neutral600">
           on {blockchain}
         </SubTitle>
       </Detail>

package/src/components/StepDetails/StepDetails.tsx

@@ -74,7 +74,7 @@ const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
                 ml={4}
                 mr={4}
                 size="small"
-                color="$neutral900"
+                color="$neutral700"
                 variant="body">{`${step.from.price.value} ${step.from.token.displayName}`}</Typography>
               <NextIcon color="gray" />
               <Divider size={4} direction="horizontal" />
@@ -86,7 +86,7 @@ const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
               <Typography
                 ml={4}
                 size="small"
-                color="$neutral900"
+                color="$neutral700"
                 variant="body">{`${isCompleted ? '' : '~'}${
                 step.to.price.value
               } ${step.to.token.displayName}`}</Typography>

package/src/components/SvgIcon/SvgIcon.style.ts

@@ -1,4 +1,4 @@
-import { darkTheme, styled } from '../../theme';
+import { styled } from '../../theme';
 
 export const SvgWithColor = styled('svg', {
   variants: {
@@ -28,11 +28,7 @@ export const SvgWithColor = styled('svg', {
         color: '$info500',
       },
       gray: {
-        $$color: '$colors$neutral900',
-        [`.${darkTheme} &`]: {
-          $$color: '$colors$neutral800',
-        },
-        color: '$$color',
+        color: '$neutral600',
       },
     },
   },

package/src/components/SwapListItem/SwapListItem.tsx

@@ -46,7 +46,7 @@ export function SwapListItem(props: PropsWithChildren<PropTypes>) {
       <Container>
         <Header>
           <Date>
-            <Typography variant="label" size="medium" color="neutral800">
+            <Typography variant="label" size="medium" color="neutral600">
               {formattedDateAndTime(creationTime, onlyShowTime)}
             </Typography>
           </Date>

package/src/components/SwapListItem/SwapToken.tsx

@@ -114,7 +114,7 @@ export function SwapToken(props: PropTypes) {
               {toToken.displayName}
             </Typography>
           </TopSection>
-          <Typography size="small" variant="body" color="neutral900">
+          <Typography size="small" variant="body" color="neutral700">
             {i18n.t('Waiting for bridge transaction')}
           </Typography>
         </Layout>
@@ -125,7 +125,7 @@ export function SwapToken(props: PropTypes) {
               {fromToken.displayName}
             </Typography>
             {!!fromAmount && (
-              <Typography size="small" variant="body" color="neutral900">
+              <Typography size="small" variant="body" color="neutral700">
                 {fromAmount}
               </Typography>
             )}
@@ -138,7 +138,7 @@ export function SwapToken(props: PropTypes) {
               {toToken.displayName}
             </Typography>
 
-            <Typography size="small" variant="body" color="neutral900">
+            <Typography size="small" variant="body" color="neutral700">
               {toAmount || estimatedAmount}
             </Typography>
           </TokenInfo>

package/src/components/Switch/Switch.styles.tsx

@@ -8,8 +8,8 @@ export const StyledSwitchRoot = styled(RadixSwitch.Root, {
   borderStyle: 'solid',
   width: '24px',
   height: '16px',
-  backgroundColor: '$neutral800',
-  borderColor: '$neutral800',
+  backgroundColor: '$neutral600',
+  borderColor: '$neutral600',
   borderRadius: '99999px',
   position: 'relative',
   padding: '0',

package/src/components/TextField/TextField.styles.ts

@@ -111,7 +111,7 @@ export const Input = styled('input', {
   },
 
   '&::placeholder, &::-webkit-input-placeholder': {
-    color: '$neutral900',
+    color: '$neutral700',
   },
   '&:focus-visible': {
     outline: 'none',

package/src/components/TokenAmount/TokenAmount.tsx

@@ -19,7 +19,7 @@ export function TokenAmount(props: PropTypes) {
         />
         <div>
           {props.label && (
-            <Typography ml={4} size="xsmall" variant="body" color="$neutral900">
+            <Typography ml={4} size="xsmall" variant="body" color="$neutral700">
               {props.label}
             </Typography>
           )}
@@ -43,7 +43,7 @@ export function TokenAmount(props: PropTypes) {
       </div>
       <div className="usd-value">
         {props.type === 'input' && (
-          <Typography mr={4} size="small" variant="body" color="$neutral900">
+          <Typography mr={4} size="small" variant="body" color="$neutral700">
             {`~$${props.price.usdValue}`}
           </Typography>
         )}

package/src/components/TokenList/TokenItem.tsx

@@ -70,7 +70,7 @@ export function TokenItem(props: PropTypes) {
           <Typography variant="body" size="medium">
             {token.symbol}
           </Typography>
-          <Typography variant="body" size="xsmall" color="neutral600">
+          <Typography variant="body" size="xsmall" color="neutral800">
             {token.name}
           </Typography>
         </TokenNameContainer>

package/src/components/TokenPreview/TokenPreview.tsx

@@ -117,7 +117,7 @@ export function TokenPreview(props: PropTypes) {
     <Box>
       <Container type={'outlined'}>
         <div className="head">
-          <Typography variant="body" size="small" color="neutral800">
+          <Typography variant="body" size="small" color="neutral600">
             {props.label}
           </Typography>
           <div>
@@ -126,7 +126,7 @@ export function TokenPreview(props: PropTypes) {
               <Typography
                 variant="body"
                 size="xsmall"
-                color="neutral600"
+                color="neutral800"
                 className="usd-value">{`$${props.usdValue}`}</Typography>
             )}
           </div>

package/src/components/Wallet/Content.tsx

@@ -1,12 +1,14 @@
+import type { ContentProps } from './Wallet.types';
+
 import React from 'react';
 
-import { ContentProps } from './Wallet.types';
-import { Typography } from '../Typography';
 import { Image } from '../common';
+import { Typography } from '../Typography';
+
 import { Text, WalletImageContainer } from './Wallet.styles';
 
 function Content(props: ContentProps) {
-  const { image, title, description, descriptionColor = 'neutral600' } = props;
+  const { image, title, description, descriptionColor = 'neutral800' } = props;
   return (
     <>
       <WalletImageContainer>

package/src/components/Wallet/SelectableWallet.tsx

@@ -40,7 +40,7 @@ export function SelectableWallet(props: SelectablePropTypes) {
           variant="body"
           size="xsmall"
           noWrap={false}
-          color={state === WalletState.CONNECTED ? 'neutral900' : info.color}>
+          color={state === WalletState.CONNECTED ? 'neutral700' : info.color}>
           {description || info.description}
         </Typography>
       </Text>

package/src/components/Wallet/Wallet.helpers.ts

@@ -20,13 +20,13 @@ export function makeInfo(state: WalletState): Info {
       };
     case WalletState.CONNECTING:
       return {
-        color: 'neutral800',
+        color: 'neutral600',
         description: i18n.t('Connecting...'),
         tooltipText: i18n.t('Connecting'),
       };
     case WalletState.DISCONNECTED:
       return {
-        color: 'neutral800',
+        color: 'neutral600',
         description: i18n.t('Disconnected'),
         tooltipText: i18n.t('Connect'),
       };

package/src/containers/SwapHistory/SwapHistory.tsx

@@ -66,7 +66,7 @@ export const ErrorMsg = styled(Typography, {
 
 export const FeeContainer = styled('div', {
   paddingLeft: '$16',
-  color: '$neutral800',
+  color: '$neutral600',
 });
 
 export const Fee = styled('div', {
@@ -150,12 +150,12 @@ const Row = styled('div', {
   padding: '$8 0',
 
   '.name': {
-    color: '$neutral600',
+    color: '$neutral800',
   },
   '.value': {
     display: 'flex',
     alignItems: 'center',
-    color: '$neutral800',
+    color: '$neutral600',
     justifyContent: 'flex-end',
   },
   '.status': {
@@ -182,7 +182,7 @@ const RequestId = styled('div', {
 
 const ExtraDetails = styled('div', {
   padding: '0',
-  color: '$neutral600',
+  color: '$neutral800',
   fontSize: '$10',
 });
 

package/src/containers/SwapInput/SwapInput.tsx

@@ -13,13 +13,13 @@ export function SwapInput(props: SwapInputProps) {
     <Container sharpBottomStyle={props.sharpBottomStyle}>
       <div className="label__container">
         <div className="label">
-          <Typography variant="body" size="small" color="$neutral800">
+          <Typography variant="body" size="small" color="$neutral600">
             {props.label}
           </Typography>
           {'balance' in props && !props.loading && (
             <div className="balance">
               <Typography
-                color="$neutral800"
+                color="$neutral600"
                 mr={4}
                 variant="body"
                 size="xsmall">
@@ -87,7 +87,7 @@ export function SwapInput(props: SwapInputProps) {
                 <Typography
                   variant="body"
                   size="medium"
-                  color={!props.price.error ? '$neutral800' : '$warning500'}
+                  color={!props.price.error ? '$neutral600' : '$warning500'}
                   style={{
                     width: 140,
                     textAlign: 'right',

package/src/containers/SwapInput/TokenSection.styles.ts

@@ -3,9 +3,9 @@ import { darkTheme, styled } from '../../theme';
 
 export const Container = styled(Button, {
   backgroundColor: 'transparent',
-  color: '$neutral900',
+  color: '$neutral700',
   '&:disabled': {
-    color: '$neutral800',
+    color: '$neutral600',
   },
   '&:focus-visible': {
     $$color: '$colors$info100',

package/src/containers/SwapInput/TokenSection.tsx

@@ -41,7 +41,7 @@ export function TokenSection(props: TokenSectionProps) {
                   ? i18n.t('Token')
                   : tokenSymbol}
               </Typography>
-              <Typography variant="body" size="medium" color="$neutral800">
+              <Typography variant="body" size="medium" color="$neutral600">
                 {error || (!loading && !chain) ? i18n.t('Chain') : chain}
               </Typography>
             </>

package/src/containers/TokenInfo/TokenInfo.tsx

@@ -174,7 +174,7 @@ export function TokenInfo(props: PropTypes) {
     <Box>
       <Container type={type === 'From' ? 'filled' : 'outlined'}>
         <div className="head">
-          <Typography variant="body" size="small" color="neutral800">
+          <Typography variant="body" size="small" color="neutral600">
             {type === 'From' ? (
               <Trans id="swap from" message="From" />
             ) : (
@@ -190,7 +190,7 @@ export function TokenInfo(props: PropTypes) {
                     setInputAmount(tokenBalanceReal.split(',').join(''));
                   }
                 }}>
-                <Typography variant="body" size="small" color="neutral600">
+                <Typography variant="body" size="small" color="neutral800">
                   {i18n.t('Balance')}: {tokenBalance} {fromToken?.symbol || ''}
                 </Typography>
                 <Divider size={4} />
@@ -209,7 +209,7 @@ export function TokenInfo(props: PropTypes) {
                 <Typography
                   variant="body"
                   size="xsmall"
-                  color="neutral600">{`$${props.outputUsdValue}`}</Typography>
+                  color="neutral800">{`$${props.outputUsdValue}`}</Typography>
               </div>
             </div>
           )}
@@ -280,7 +280,7 @@ export function TokenInfo(props: PropTypes) {
                     <Typography
                       variant="body"
                       size="xsmall"
-                      color="neutral800">{`$${inputUsdValue}`}</Typography>
+                      color="neutral600">{`$${inputUsdValue}`}</Typography>
                   </span>
                 }
                 value={inputAmount || ''}

package/src/containers/Warnings/BalanceErrors.tsx

@@ -28,7 +28,7 @@ export function BalanceErrors({ messages }: PropTypes) {
           const key = index + warning;
           return (
             <ListItem key={key}>
-              <Message variant="body" size="medium" color="$neutral900">
+              <Message variant="body" size="medium" color="$neutral700">
                 {warning}
               </Message>
             </ListItem>