@rango-dev/ui 0.17.1-next.1 → 0.17.1-next.10

package/src/components/I18nManager/I18nManager.tsx

@@ -2,7 +2,7 @@ import type { PropsWithChildren } from 'react';
 
 import { i18n } from '@lingui/core';
 import { I18nProvider } from '@lingui/react';
-import React, { useEffect } from 'react';
+import React, { useEffect, useReducer } from 'react';
 
 /*
  *Note: esbuild doesn't work properly with paths yet, so I couldn't use `paths` to make this path shorter.
@@ -16,7 +16,6 @@ import { messages as esMessages } from '../../../../../translations/es';
 import { messages as frMessages } from '../../../../../translations/fr';
 import { messages as jpMessages } from '../../../../../translations/jp';
 
-const DEFAULT_LANGUAGE = 'en';
 const messages = {
   en: enMessages,
   es: esMessages,
@@ -28,15 +27,25 @@ i18n.load(messages);
 
 export type Language = keyof typeof messages;
 interface PropTypes {
-  language?: Language;
+  language: Language;
 }
 
 function I18nManager(props: PropsWithChildren<PropTypes>) {
+  const [count, forceUpdate] = useReducer((x) => x + 1, 0);
   useEffect(() => {
-    i18n.activate(props?.language || DEFAULT_LANGUAGE);
-  }, [props?.language]);
-
-  return <I18nProvider i18n={i18n}>{props.children}</I18nProvider>;
+    i18n.on('change', () => {
+      forceUpdate();
+    });
+  }, [i18n]);
+  useEffect(() => {
+    i18n.activate(props.language);
+  }, [props.language]);
+
+  return (
+    <I18nProvider i18n={i18n} key={count}>
+      {props.children}
+    </I18nProvider>
+  );
 }
 
 export { I18nManager };

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,9 +111,9 @@ export const Input = styled('input', {
   },
 
   '&::placeholder, &::-webkit-input-placeholder': {
-    color: '$neutral900',
+    color: '$neutral700',
   },
-  '&:focus-within': {
+  '&: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/components/index.ts

@@ -10,7 +10,6 @@ export * from './ChangeSlippageButton';
 export * from './Checkbox';
 export * from './Chip';
 export * from './common';
-export * from './ColorPicker';
 export * from './Divider';
 export * from './Drawer';
 export * from './Header';
@@ -50,3 +49,4 @@ export * from './RouteCost';
 export * from './TokenAmount';
 export * from './StepDetails';
 export * from './Popover';
+export * from './Flags';

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>

package/src/icons/Colors.tsx

@@ -0,0 +1,33 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgColors(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.49068 9.35508C5.80086 9.27081 6.12485 9.43296 6.24334 9.73176C6.95508 11.5267 8.48265 12.9097 10.3699 13.4254L10.3738 13.4264C10.8831 13.569 11.428 13.6418 11.9996 13.6418C12.5713 13.6418 13.1162 13.569 13.6255 13.4264C13.9367 13.3393 14.2635 13.5012 14.3828 13.8015C14.7188 14.6478 14.9048 15.5795 14.9048 16.5471C14.9048 18.7443 13.949 20.7327 12.421 22.0881C11.1043 23.2795 9.36406 24 7.45241 24C3.34076 24 0 20.659 0 16.5471C0 13.1174 2.33477 10.2125 5.49068 9.35508ZM5.30898 10.7382C2.95349 11.6086 1.26312 13.8904 1.26312 16.5471C1.26312 19.9614 4.03839 22.7368 7.45241 22.7368C9.04089 22.7368 10.4827 22.1394 11.5757 21.1495L11.5807 21.1449C12.8479 20.0219 13.6417 18.3733 13.6417 16.5471C13.6417 15.9326 13.5516 15.3369 13.3856 14.7783C12.9358 14.8631 12.4723 14.9049 11.9996 14.9049C11.3215 14.9049 10.6621 14.8187 10.0351 14.6433C7.95605 14.0747 6.24187 12.6339 5.30898 10.7382Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.9991 1.26318C8.58512 1.26318 5.80986 4.0386 5.80986 7.45288C5.80986 8.25876 5.96545 9.03186 6.24334 9.73176C6.95508 11.5267 8.48265 12.9097 10.3699 13.4254L10.3738 13.4264C10.8831 13.569 11.428 13.6418 11.9996 13.6418C12.5713 13.6418 13.1162 13.569 13.6255 13.4264L13.6288 13.4261C15.5161 12.9105 17.0437 11.5275 17.7555 9.73257C18.0333 9.03266 18.1884 8.25876 18.1884 7.45288C18.1884 4.0386 15.4132 1.26318 11.9991 1.26318ZM4.54674 7.45288C4.54674 3.34099 7.8875 0 11.9991 0C16.1108 0 19.4516 3.34099 19.4516 7.45288C19.4516 8.42052 19.2655 9.3522 18.9295 10.1985C18.0727 12.3591 16.2361 14.0226 13.9637 14.6441C13.3367 14.8195 12.6778 14.9049 11.9996 14.9049C11.3215 14.9049 10.6621 14.8187 10.0351 14.6433C7.76264 14.0218 5.92563 12.3591 5.06877 10.1985M4.54674 7.45288C4.54674 8.42043 4.73285 9.35227 5.06877 10.1985L4.54674 7.45288Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17.7567 9.73176C17.8751 9.43296 18.1991 9.27081 18.5093 9.35508C21.6652 10.2125 24 13.1174 24 16.5471C24 20.659 20.6592 24 16.5476 24C14.6347 24 12.8934 23.2786 11.5764 22.0857C11.4433 21.9652 11.3678 21.7937 11.3688 21.6142C11.3698 21.4347 11.4464 21.264 11.5807 21.1449C12.8479 20.0219 13.6417 18.3733 13.6417 16.5471C13.6417 15.7412 13.4874 14.9676 13.2095 14.2677C13.1432 14.1007 13.1512 13.9133 13.2315 13.7525C13.3117 13.5917 13.4567 13.4727 13.6301 13.4254C15.5173 12.9097 17.0449 11.5267 17.7567 9.73176ZM18.691 10.7382C17.8554 12.4363 16.3929 13.7693 14.6027 14.4375C14.7994 15.106 14.9048 15.8163 14.9048 16.5471C14.9048 18.4806 14.1654 20.2523 12.9466 21.5733C13.9594 22.3074 15.2008 22.7368 16.5476 22.7368C19.9616 22.7368 22.7369 19.9614 22.7369 16.5471C22.7369 13.8904 21.0465 11.6086 18.691 10.7382Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+export default SvgColors;

package/src/icons/CustomColors.tsx

@@ -0,0 +1,21 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgCustomColors(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17.3172 1.14659C18.8459 -0.382197 21.3246 -0.382197 22.8534 1.14659C24.3822 2.67538 24.3822 5.15404 22.8534 6.68283L21.9458 7.59042C21.4696 8.06664 21.4696 8.83873 21.9458 9.31494C22.9734 10.3425 22.9734 12.0084 21.9458 13.036C20.9183 14.0635 19.2523 14.0635 18.2248 13.036L10.964 5.77524C9.93643 4.7477 9.93643 3.08172 10.964 2.05419C11.9915 1.02665 13.6575 1.02665 14.685 2.05419C15.1612 2.5304 15.9333 2.5304 16.4096 2.05419L17.3172 1.14659ZM21.8551 2.14486C20.8777 1.16739 19.2929 1.16739 18.3154 2.14486L17.4078 3.05245C16.3803 4.07999 14.7143 4.07999 13.6868 3.05245C13.2105 2.57624 12.4384 2.57624 11.9622 3.05245C11.486 3.52866 11.486 4.30076 11.9622 4.77697L19.223 12.0377C19.6992 12.5139 20.4713 12.5139 20.9475 12.0377C21.4238 11.5615 21.4238 10.7894 20.9475 10.3132C19.92 9.28567 19.92 7.6197 20.9475 6.59216L21.8551 5.68456C22.8326 4.7071 22.8326 3.12232 21.8551 2.14486ZM11.4177 9.85952C11.1922 9.63393 10.8264 9.63393 10.6008 9.85951L3.49641 16.9639C2.33926 18.121 1.62441 19.6473 1.47625 21.277L1.41434 21.9581C1.38168 22.3173 1.68265 22.6183 2.04192 22.5857L2.72301 22.5237C4.35276 22.3756 5.87898 21.6607 7.03613 20.5036L14.1405 13.3992C14.3661 13.1736 14.3661 12.8079 14.1405 12.5823L11.4177 9.85952ZM9.60255 8.86125C10.3795 8.08433 11.6391 8.08434 12.416 8.86125L15.1388 11.584C15.9157 12.3609 15.9157 13.6206 15.1388 14.3975L8.0344 21.5019C6.64371 22.8925 4.80947 23.7517 2.85082 23.9297L2.16973 23.9916C0.932446 24.1041 -0.104108 23.0676 0.00837295 21.8303L0.0702906 21.1492C0.24835 19.1905 1.10746 17.3563 2.49815 15.9656L9.60255 8.86125Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+export default SvgCustomColors;