@rango-dev/ui 0.34.1-next.3 → 0.34.1-next.5

package/src/components/FullExpandedQuote/FullExpandedQuote.styles.ts

@@ -31,7 +31,7 @@ export const RouteContainer = styled('div', {
       true: {
         $$color: '$colors$secondary500',
         [`.${darkTheme} &`]: {
-          $$color: '$colors$secondary400',
+          $$color: '$colors$secondary250',
         },
         borderColor: '$$color',
       },
@@ -119,13 +119,13 @@ export const SwapperSection = styled('div', {
   width: '100%',
   height: '50%',
   borderBottom: '1px dashed',
-  borderColor: '$info300',
+  borderColor: '$secondary200',
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'flex-end',
   gap: '2px',
   [`.${darkTheme} &`]: {
-    borderColor: '$secondary600',
+    borderColor: '$secondary550',
   },
 });
 
@@ -217,9 +217,9 @@ export const VerticalLine = styled('div', {
   width: 'calc(50% + 1px)',
   borderRight: '1px dashed',
   height: '$10',
-  borderColor: '$info300',
+  borderColor: '$secondary200',
   [`.${darkTheme} &`]: {
-    borderColor: '$secondary600',
+    borderColor: '$secondary550',
   },
 });
 
@@ -240,9 +240,9 @@ export const lastStepStyle = css({
     height: '$6',
     borderTop: '2px solid',
     borderRight: '2px solid',
-    borderColor: '$info300',
+    borderColor: '$secondary200',
     [`.${darkTheme} &`]: {
-      borderColor: '$secondary600',
+      borderColor: '$secondary550',
     },
   },
 });

package/src/components/QuoteTag/QuoteTag.styles.ts

@@ -15,7 +15,7 @@ export const TagContainer = styled('div', {
         [`& .${getLabelStyles}`]: {
           color: '$secondary500',
           [`.${darkTheme} &`]: {
-            color: '$secondary400',
+            color: '$secondary250',
           },
         },
       },

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

@@ -17,7 +17,7 @@ export const StyledItem = styled(Radio.Item, {
   '&[data-state="checked"]': {
     $$color: '$colors$secondary500',
     [`.${darkTheme} &`]: {
-      $$color: '$colors$secondary400',
+      $$color: '$colors$secondary250',
     },
     backgroundColor: '$$color',
     borderColor: '$$color',

package/src/components/Select/Select.styles.ts

@@ -53,7 +53,7 @@ export const SelectTrigger = styled(Select.Trigger, {
         border: '1px solid $neutral300',
         borderRadius: '$xm',
         '&:hover': {
-          borderColor: '$info300',
+          borderColor: '$secondary200',
           '& svg': {
             color: '$secondary500',
           },

package/src/components/Skeleton/Skeleton.styles.ts

@@ -11,10 +11,10 @@ const waveSquares = keyframes({
 // #2B3462 -0.15%, rgba(43, 52, 98, 0.20) 99.85%
 export const SkeletonContainer = styled('div', {
   $$background:
-    'linear-gradient(90deg, $colors$info300 20%, rgba(200, 226, 255, 0.20) 70%, $colors$info300 100%)',
+    'linear-gradient(90deg, $colors$secondary200 20%, rgba(200, 226, 255, 0.20) 70%, $colors$secondary200 100%)',
   [`.${darkTheme} &`]: {
     $$background:
-      'linear-gradient(90deg, $colors$secondary600 0%,rgba(43, 52, 98, 0.20) 70%, $colors$secondary600 100%)',
+      'linear-gradient(90deg, $colors$secondary550 0%,rgba(43, 52, 98, 0.20) 70%, $colors$secondary550 100%)',
   },
   background: '$$background',
   backgroundSize: '800px 100px',

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

@@ -22,7 +22,7 @@ export const StyledSwitchRoot = styled(RadixSwitch.Root, {
   '&[data-state="checked"]': {
     $$color: '$colors$secondary500',
     [`.${darkTheme} &`]: {
-      $$color: '$colors$secondary400',
+      $$color: '$colors$secondary250',
     },
     backgroundColor: '$$color',
     borderColor: '$$color',

package/src/components/Wallet/Wallet.styles.ts

@@ -58,7 +58,7 @@ export const WalletButton = styled('button', {
         outlineWidth: 1,
         $$outline: '$colors$secondary500',
         [`.${darkTheme} &`]: {
-          $$outline: '$colors$secondary400',
+          $$outline: '$colors$secondary250',
         },
         outlineColor: '$$outline',
         outlineStyle: 'solid',

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

@@ -51,7 +51,7 @@ export const InputAmount = styled(TextField, {
   },
 });
 export const MaxButton = styled(Button, {
-  $$color: '$colors$info300',
+  $$color: '$colors$secondary200',
   [`.${darkTheme} &`]: {
     $$color: '$colors$secondary800',
   },
@@ -59,7 +59,7 @@ export const MaxButton = styled(Button, {
   '& ._typography': {
     color: '$colors$secondary500',
     [`.${darkTheme} &`]: {
-      color: '$colors$secondary400',
+      color: '$colors$secondary250',
     },
   },
 });

package/src/icons/Paste.tsx

@@ -0,0 +1,26 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgPaste(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_16926_238235)">
+        <path
+          d="M13.5 7H9.5C8.673 7 8 7.673 8 8.5V13H2.5C2.36739 13 2.24021 12.9473 2.14645 12.8536C2.05268 12.7598 2 12.6326 2 12.5V2.5C2 2.36739 2.05268 2.24021 2.14645 2.14645C2.24021 2.05268 2.36739 2 2.5 2H4V2.5C4 2.63261 4.05268 2.75979 4.14645 2.85355C4.24021 2.94732 4.36739 3 4.5 3H8.5C8.63261 3 8.75979 2.94732 8.85355 2.85355C8.94732 2.75979 9 2.63261 9 2.5V2H10.5C10.6326 2 10.7598 2.05268 10.8536 2.14645C10.9473 2.24021 11 2.36739 11 2.5V5.5C11 5.63261 11.0527 5.75979 11.1464 5.85355C11.2402 5.94732 11.3674 6 11.5 6C11.6326 6 11.7598 5.94732 11.8536 5.85355C11.9473 5.75979 12 5.63261 12 5.5V2.5C12 1.673 11.327 1 10.5 1H9V0.5C9 0.367392 8.94732 0.240215 8.85355 0.146447C8.75979 0.0526784 8.63261 0 8.5 0L4.5 0C4.36739 0 4.24021 0.0526784 4.14645 0.146447C4.05268 0.240215 4 0.367392 4 0.5V1H2.5C1.673 1 1 1.673 1 2.5V12.5C1 13.327 1.673 14 2.5 14H8V14.5C8 15.327 8.673 16 9.5 16H13.5C14.327 16 15 15.327 15 14.5V8.5C15 7.673 14.327 7 13.5 7ZM5 1H8V2H5V1ZM14 14.5C14 14.6326 13.9473 14.7598 13.8536 14.8536C13.7598 14.9473 13.6326 15 13.5 15H9.5C9.36739 15 9.24021 14.9473 9.14645 14.8536C9.05268 14.7598 9 14.6326 9 14.5V8.5C9 8.36739 9.05268 8.24021 9.14645 8.14645C9.24021 8.05268 9.36739 8 9.5 8H13.5C13.6326 8 13.7598 8.05268 13.8536 8.14645C13.9473 8.24021 14 8.36739 14 8.5V14.5ZM13 13.5C13 13.6326 12.9473 13.7598 12.8536 13.8536C12.7598 13.9473 12.6326 14 12.5 14H10.5C10.3674 14 10.2402 13.9473 10.1464 13.8536C10.0527 13.7598 10 13.6326 10 13.5C10 13.3674 10.0527 13.2402 10.1464 13.1464C10.2402 13.0527 10.3674 13 10.5 13H12.5C12.6326 13 12.7598 13.0527 12.8536 13.1464C12.9473 13.2402 13 13.3674 13 13.5ZM13 11.5C13 11.6326 12.9473 11.7598 12.8536 11.8536C12.7598 11.9473 12.6326 12 12.5 12H10.5C10.3674 12 10.2402 11.9473 10.1464 11.8536C10.0527 11.7598 10 11.6326 10 11.5C10 11.3674 10.0527 11.2402 10.1464 11.1464C10.2402 11.0527 10.3674 11 10.5 11H12.5C12.6326 11 12.7598 11.0527 12.8536 11.1464C12.9473 11.2402 13 11.3674 13 11.5ZM13 9.5C13 9.63261 12.9473 9.75979 12.8536 9.85355C12.7598 9.94732 12.6326 10 12.5 10H10.5C10.3674 10 10.2402 9.94732 10.1464 9.85355C10.0527 9.75979 10 9.63261 10 9.5C10 9.36739 10.0527 9.24021 10.1464 9.14645C10.2402 9.05268 10.3674 9 10.5 9H12.5C12.6326 9 12.7598 9.05268 12.8536 9.14645C12.9473 9.24021 13 9.36739 13 9.5Z"
+          fill="#727272"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_16926_238235">
+          <rect width={16} height={16} fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+export default SvgPaste;

package/src/icons/RangoExplorer.tsx

@@ -0,0 +1,40 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgRangoExplorer(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="M18.2815 8.25591L19.6283 7.73436C20.2352 8.89455 20.5936 10.2051 20.6294 11.5964C20.634 11.7859 20.6325 11.9742 20.6249 12.1613C19.5312 10.5143 17.6595 9.42856 15.5343 9.42856C15.4286 9.42856 15.3235 9.43125 15.219 9.43656C16.4138 8.96941 17.7426 8.45317 18.2815 8.25591ZM13.3962 9.81336L12.2685 9.23878L11.5409 9.5425L12.6547 10.1488C12.8929 10.0212 13.1405 9.90896 13.3962 9.81336ZM11.3239 11.1122C10.7771 10.8212 10.2844 10.5585 9.94529 10.3774C9.45802 10.1171 9.1042 9.64569 9.03773 9.09755C8.98763 8.68747 9.09091 8.21551 9.58329 7.80236C9.84865 7.55744 10.1319 7.4158 10.1738 7.39586L10.1841 7.39126L15.6785 5.13683C15.6785 5.13683 15.7132 5.12302 15.7639 5.09694L16.9076 4.62192C15.4688 3.60183 13.7125 3 11.8151 3C6.93834 3 2.91085 7.10492 3.00084 11.9814C3.02845 13.4873 3.43544 14.8996 4.12723 16.1298L6.25525 15.2023L9.68954 13.7611C9.75651 13.5402 9.83567 13.3245 9.92623 13.1149C9.91673 13.1097 9.90725 13.1045 9.89779 13.0993C9.41097 12.8318 8.99628 12.604 8.76572 12.481C8.68653 12.4387 8.59757 12.3845 8.50852 12.3301L8.50848 12.3301L8.50848 12.3301C8.41757 12.2746 8.32657 12.2191 8.24573 12.1762C7.38777 11.7227 6.82535 10.4423 8.12762 8.92267C8.12762 8.92267 7.99264 10.3646 8.79896 10.8545C9.12623 11.0535 9.85537 11.445 10.653 11.8655C10.8557 11.5962 11.0803 11.3442 11.3239 11.1122ZM9.43422 15.255C9.43003 15.3478 9.42792 15.4411 9.42792 15.5349C9.42792 15.8823 9.45692 16.2228 9.51263 16.5543L5.8932 18.0636L5.69686 18.1617C5.38803 17.8642 5.10119 17.5441 4.83839 17.2045L6.26798 16.6002L9.43422 15.255ZM9.85338 17.7788C10.3154 18.9477 11.1278 19.9398 12.1611 20.6259C12.0627 20.6297 11.9639 20.632 11.8647 20.6325C9.98159 20.6427 8.23602 20.0614 6.79927 19.0648L7.93435 18.5663L9.85338 17.7788ZM10.612 9.02247C10.612 9.02247 10.9816 9.22751 11.5425 9.53788L18.852 6.50573C18.5882 6.15649 18.2988 5.82822 17.9869 5.52245C17.9353 5.55159 17.8923 5.56796 17.8923 5.56796L10.9441 8.48962C10.8683 8.46801 9.83602 8.15546 10.3829 7.31633C10.3829 7.31633 9.18744 8.16225 10.2683 8.77377L10.2679 8.77396C10.3537 8.86242 10.4662 8.94628 10.612 9.02247Z"
+        fill="url(#paint0_linear_16912_208495)"
+      />
+      <path
+        d="M20.2351 15.5998C20.2351 18.1601 18.1596 20.2355 15.5994 20.2355C13.0392 20.2355 10.9637 18.1601 10.9637 15.5998C10.9637 13.0396 13.0392 10.9641 15.5994 10.9641C18.1596 10.9641 20.2351 13.0396 20.2351 15.5998ZM20.6394 20.7498C20.6096 20.7498 20.5817 20.7377 20.5642 20.7202L19.6076 19.7636C19.5686 19.7246 19.5637 19.6554 19.6091 19.6065C19.6486 19.5688 19.7169 19.5647 19.7652 19.61L20.7198 20.5646C20.7579 20.6028 20.7634 20.6698 20.7212 20.7184C20.6955 20.74 20.6657 20.7498 20.6394 20.7498Z"
+        stroke="#727272"
+        strokeWidth={0.5}
+        fill="white"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_16912_208495"
+          x1={2.99864}
+          y1={11.8168}
+          x2={20.6305}
+          y2={11.8168}
+          gradientUnits="userSpaceOnUse">
+          <stop offset={0.0754} stopColor="#469BF5" />
+          <stop offset={0.7046} stopColor="#2857F2" />
+          <stop offset={1} stopColor="#1C3CF1" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}
+export default SvgRangoExplorer;

package/src/icons/index.ts

@@ -43,7 +43,9 @@ export { default as NotificationNumberIcon } from './NotificationNumber';
 export { default as NotificationsIcon } from './Notifications';
 export { default as NumberIcon } from './Number';
 export { default as OtherCategoryIcon } from './OtherCategory';
+export { default as PasteIcon } from './Paste';
 export { default as PinIcon } from './Pin';
+export { default as RangoExplorerIcon } from './RangoExplorer';
 export { default as RefreshIcon } from './Refresh';
 export { default as ReportIcon } from './Report';
 export { default as RequestIcon } from './Request';

package/src/theme.ts

@@ -11,18 +11,15 @@ export const theme = {
   colors: {
     primary: '#1C3CF1',
     primary500: '#1C3CF1',
-    primary600: '#0B27C5',
+    primary550: '#0B27C4',
 
     secondary: '#469BF5',
     secondary100: '#E9F3FF',
-    secondary200: '#D6EAFF',
-    secondary300: '#C8E3FF',
-    secondary400: '#B5D9FF',
+    secondary150: '#D6EAFF',
+    secondary200: '#C8E2FF',
+    secondary250: '#B5D9FF',
     secondary500: '#469BF5',
-    secondary600: '#2284ED',
-    secondary700: '#242D5B',
-    secondary800: '#131C49',
-    secondary900: '#0E1744',
+    secondary550: '#2284ED',
 
     neutral: '#E6E6E6',
     neutral100: '#F9F9F9',
@@ -184,9 +181,9 @@ const utils = {
 
 export const darkColors = {
   secondary: '#2284ED',
-  secondary400: '#469BF5',
+  secondary250: '#469BF5',
   secondary500: '#2284ED',
-  secondary600: '#2B3462',
+  secondary550: '#2B3462',
 
   neutral: '#222222',
   neutral900: '#E9E9E9',
@@ -228,3 +225,16 @@ export const darkTheme = createTheme('dark-theme-ui', {
     s: '0px 3px 5px 3px #222, 0px 6px 10px 3px #222, 0px 1px 18px 3px #222',
   },
 });
+
+export const rangoDarkColors = {
+  neutral: '#161C38',
+  neutral100: '#101327',
+  neutral200: '#0D122C',
+  neutral300: '#0F142E',
+  neutral400: '#111733',
+  neutral500: '#161C38',
+  neutral800: '#B8B8B8',
+  neutral900: '#E9E9E9',
+  background: '#070917',
+  foreground: '#FDFDFD',
+};