@rango-dev/ui 0.15.1-next.12 → 0.15.1-next.13

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

@@ -1,6 +1,6 @@
 import * as RadixCheckbox from '@radix-ui/react-checkbox';
 
-import { styled } from '../../theme';
+import { darkTheme, styled } from '../../theme';
 
 export const CheckboxContainer = styled('div', {
   display: 'flex',
@@ -16,12 +16,13 @@ export const CheckboxRoot = styled(RadixCheckbox.Root, {
   border: '1px solid $neutral800',
   backgroundColor: 'transparent',
   cursor: 'pointer',
-  '&:hover': {
-    borderColor: '$secondary600',
-  },
   '&[data-state="checked"]': {
-    backgroundColor: '$secondary600',
-    borderColor: '$secondary600',
+    $$color: '$colors$secondary500',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$secondary400',
+    },
+    backgroundColor: '$$color',
+    borderColor: '$$color',
   },
 });
 

package/src/components/Chip/Chip.styles.ts

@@ -8,19 +8,28 @@ export const ChipContainer = styled('button', {
   padding: '$5 $15',
   cursor: 'pointer',
   transition: 'all 0.35s',
-  backgroundColor: '$neutral100',
   border: '1px solid transparent',
+  $$color: '$colors$neutral100',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral300',
+  },
+  backgroundColor: '$$color',
 
   '&:hover': {
     $$color: '$colors$info100',
     [`.${darkTheme} &`]: {
-      $$color: '$colors$neutral400',
+      $$color: '$colors$neutral100',
     },
     backgroundColor: '$$color',
   },
 
-  '&:focus': {
-    outline: '1px solid gray',
+  '&:focus-visible': {
+    $$color: '$colors$info100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$info700',
+    },
+    backgroundColor: '$$color',
+    outline: 0,
   },
 
   variants: {

package/src/components/Header/Header.styles.ts

@@ -1,11 +1,15 @@
-import { styled } from '../../theme';
+import { darkTheme, styled } from '../../theme';
 
 export const Container = styled('div', {
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
   padding: '$15 $20',
-  backgroundColor: '$neutral100',
+  $$color: '$colors$neutral100',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral300',
+  },
+  backgroundColor: '$$color',
   position: 'relative',
   borderTopRightRadius: '$primary',
   borderTopLeftRadius: '$primary',

package/src/components/ListItem/ListItem.styles.ts

@@ -1,4 +1,4 @@
-import { styled } from '../../theme';
+import { darkTheme, styled } from '../../theme';
 
 export const BaseListItem = styled('li', {
   width: '100%',
@@ -38,7 +38,12 @@ export const BaseListItem = styled('li', {
   variants: {
     hasDivider: {
       true: {
-        borderBottom: '1px solid $neutral300',
+        borderBottom: '1px solid',
+        $$color: '$colors$neutral300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$neutral400',
+        },
+        borderColor: '$$color',
         borderBottomRightRadius: 0,
         borderBottomLeftRadius: 0,
       },

package/src/components/ListItemButton/ListItemButton.styles.ts

@@ -11,7 +11,7 @@ export const BaseListItemButton = styled('button', {
     outline: 0,
     $$color: '$colors$info100',
     [`.${darkTheme} &`]: {
-      $$color: '$colors$neutral400',
+      $$color: '$colors$info700',
     },
     backgroundColor: '$$color',
   },
@@ -20,7 +20,7 @@ export const BaseListItemButton = styled('button', {
     borderRadius: '$xs',
 
     [`.${darkTheme} &`]: {
-      $$color: '$colors$neutral400',
+      $$color: '$colors$neutral100',
     },
     backgroundColor: '$$color',
     cursor: 'pointer',
@@ -31,7 +31,12 @@ export const BaseListItemButton = styled('button', {
   variants: {
     hasDivider: {
       true: {
-        borderBottom: '1px solid $neutral300',
+        borderBottom: '1px solid',
+        $$color: '$colors$neutral300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$neutral400',
+        },
+        borderColor: '$$color',
         borderBottomRightRadius: 0,
         borderBottomLeftRadius: 0,
       },

package/src/components/MessageBox/CollapsibleMessageBox.styles.tsx

@@ -7,15 +7,27 @@ export const Trigger = styled(Collapsible.Trigger, {
   paddingBottom: '$5',
   borderRadius: '$xm',
   cursor: 'pointer',
-  backgroundColor: '$neutral200',
+  $$backgroundColor: '$colors$neutral200',
+  [`.${darkTheme} &`]: {
+    $$backgroundColor: '$colors$neutral500',
+  },
+  backgroundColor: '$$backgroundColor',
   textAlign: 'center',
   border: 0,
   width: '100%',
   '&:hover': {
     $$color: '$colors$info100',
     [`.${darkTheme} &`]: {
-      $$color: '$colors$neutral400',
+      $$color: '$colors$neutral100',
+    },
+    backgroundColor: '$$color',
+  },
+  '&:focus-visible': {
+    $$color: '$colors$info100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$info700',
     },
     backgroundColor: '$$color',
+    outline: 0,
   },
 });

package/src/components/MessageBox/MessageBox.styles.tsx

@@ -1,4 +1,4 @@
-import { styled } from '../../theme';
+import { darkTheme, styled } from '../../theme';
 
 export const Container = styled('div', {
   display: 'flex',
@@ -21,19 +21,39 @@ export const IconHighlight = styled('div', {
   variants: {
     type: {
       success: {
-        backgroundColor: '$success300',
+        $$color: '$colors$success300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$success600',
+        },
+        backgroundColor: '$$color',
       },
       warning: {
-        backgroundColor: '$warning300',
+        $$color: '$colors$warning300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$warning600',
+        },
+        backgroundColor: '$$color',
       },
       error: {
-        backgroundColor: '$error300',
+        $$color: '$colors$error300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$error600',
+        },
+        backgroundColor: '$$color',
       },
       info: {
-        backgroundColor: '$info300',
+        $$color: '$colors$info300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$info600',
+        },
+        backgroundColor: '$$color',
       },
       loading: {
-        backgroundColor: '$info300',
+        $$color: '$colors$info300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$info600',
+        },
+        backgroundColor: '$$color',
       },
     },
   },

package/src/components/Modal/Modal.styles.ts

@@ -7,7 +7,7 @@ export const BackDrop = styled('div', {
   left: '0',
   width: '100%',
   height: '100%',
-  backgroundColor: 'rgba(0,0,0,0)',
+  backgroundColor: 'transparent',
   zIndex: 10,
   borderRadius: '$primary',
   display: 'flex',
@@ -28,7 +28,7 @@ export const BackDrop = styled('div', {
     },
     active: {
       true: {
-        backgroundColor: 'rgba(0,0,0,.1)',
+        backgroundColor: 'color-mix(in srgb, $neutral500 70%, transparent)',
       },
     },
   },

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

@@ -1,6 +1,6 @@
 import * as Radio from '@radix-ui/react-radio-group';
 
-import { styled } from '../../theme';
+import { darkTheme, styled } from '../../theme';
 
 export const StyledItem = styled(Radio.Item, {
   padding: '0',
@@ -11,12 +11,13 @@ export const StyledItem = styled(Radio.Item, {
   backgroundColor: 'transparent',
   border: '1px solid $neutral800',
 
-  '&:hover': {
-    borderColor: '$secondary600',
-  },
   '&[data-state="checked"]': {
-    backgroundColor: '$secondary600',
-    borderColor: '$secondary600',
+    $$color: '$colors$secondary500',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$secondary400',
+    },
+    backgroundColor: '$$color',
+    borderColor: '$$color',
   },
 });
 

package/src/components/StepDetails/StepDetails.styles.ts

@@ -1,4 +1,4 @@
-import { styled } from '../../theme';
+import { darkTheme, styled } from '../../theme';
 
 export const Container = styled('div', {
   width: '100%',
@@ -10,7 +10,10 @@ export const Container = styled('div', {
     type: {
       'route-details': { border: 'none' },
       'route-progress': {
-        backgroundColor: '$neutral100',
+        $$color: '$colors$neutral100',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$neutral300',
+        },
         borderRadius: '$xm',
         padding: '$10 $15',
         marginBottom: '15px',

package/src/components/SwapListItem/SwapListItem.styles.ts

@@ -17,7 +17,11 @@ export const Header = styled('div', {
 });
 
 export const Main = styled('button', {
-  backgroundColor: '$neutral100',
+  $$color: '$colors$neutral100',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral300',
+  },
+  backgroundColor: '$$color',
   border: 'none',
   width: '100%',
   borderRadius: '$xm',
@@ -27,12 +31,16 @@ export const Main = styled('button', {
   '&:hover': {
     $$color: '$colors$info100',
     [`.${darkTheme} &`]: {
-      $$color: '$colors$neutral400',
+      $$color: '$colors$neutral100',
     },
     backgroundColor: '$$color',
   },
   '&:focus-visible': {
-    backgroundColor: '$surface600',
+    $$color: '$colors$info100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$info700',
+    },
+    backgroundColor: '$$color',
     outline: 'none',
   },
 });
@@ -44,7 +52,11 @@ export const Date = styled('div', {
 });
 
 export const LoadingMain = styled('div', {
-  backgroundColor: '$neutral100',
+  $$color: '$colors$neutral100',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral300',
+  },
+  backgroundColor: '$$color',
   border: 'none',
   width: '100%',
   borderRadius: '$xm',

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

@@ -1,6 +1,6 @@
 import * as RadixSwitch from '@radix-ui/react-switch';
 
-import { styled } from '../../theme';
+import { darkTheme, styled } from '../../theme';
 
 export const StyledSwitchRoot = styled(RadixSwitch.Root, {
   boxSizing: 'border-box',
@@ -16,13 +16,13 @@ export const StyledSwitchRoot = styled(RadixSwitch.Root, {
   cursor: 'pointer',
   transition: 'all 0.35s',
 
-  '&:hover': {
-    backgroundColor: '$secondary500',
-    borderColor: '$secondary500',
-  },
   '&[data-state="checked"]': {
-    backgroundColor: '$secondary600',
-    borderColor: '$secondary600',
+    $$color: '$colors$secondary500',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$secondary400',
+    },
+    backgroundColor: '$$color',
+    borderColor: '$$color',
   },
   '-webkit-tap-highlight-color': 'rgba(0, 0, 0, 0)',
 });

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

@@ -25,11 +25,15 @@ export const InputContainer = styled('div', {
     },
     variant: {
       contained: {
-        backgroundColor: '$neutral100',
+        $$color: '$colors$neutral100',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$neutral300',
+        },
+        backgroundColor: '$$color',
         '&:hover': {
           $$color: '$colors$info100',
           [`.${darkTheme} &`]: {
-            $$color: '$colors$neutral400',
+            $$color: '$colors$neutral100',
           },
           backgroundColor: '$$color',
         },

package/src/components/Wallet/ClickableWallet.tsx

@@ -36,7 +36,7 @@ function Wallet(props: WalletPropTypes) {
   }
 
   return (
-    <Tooltip content={info.tooltipText} side="top">
+    <Tooltip container={props.container} content={info.tooltipText} side="top">
       <WalletButton
         disabled={props.state == WalletState.CONNECTING}
         onClick={() => {

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

@@ -23,7 +23,11 @@ export const WalletButton = styled('button', {
   border: '0',
   display: 'flex',
   flexDirection: 'column',
-  backgroundColor: '$neutral100',
+  $$color: '$colors$neutral100',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral300',
+  },
+  backgroundColor: '$$color',
   alignItems: 'center',
   cursor: 'pointer',
   width: 110,
@@ -31,15 +35,27 @@ export const WalletButton = styled('button', {
   '&:hover': {
     $$color: '$colors$info100',
     [`.${darkTheme} &`]: {
-      $$color: '$colors$neutral400',
+      $$color: '$colors$neutral100',
+    },
+    backgroundColor: '$$color',
+  },
+  '&:focus-visible': {
+    $$color: '$colors$info100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$info700',
     },
     backgroundColor: '$$color',
+    outline: 0,
   },
   variants: {
     selected: {
       true: {
         outlineWidth: 1,
-        outlineColor: '$secondary500',
+        $$outline: '$colors$secondary500',
+        [`.${darkTheme} &`]: {
+          $$outline: '$colors$secondary400',
+        },
+        outlineColor: '$$outline',
         outlineStyle: 'solid',
       },
     },

package/src/components/Wallet/Wallet.types.ts

@@ -56,6 +56,7 @@ interface WalletProps {
   selected?: boolean;
   description?: string;
   isLoading?: boolean;
+  container?: HTMLElement;
 }
 
 export type WalletPropTypes = State & WalletProps;

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

@@ -2,7 +2,11 @@ import { Button, TextField } from '../../components';
 import { darkTheme, styled } from '../../theme';
 
 export const Container = styled('div', {
-  backgroundColor: '$neutral100',
+  $$color: '$colors$neutral100',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral300',
+  },
+  backgroundColor: '$$color',
   borderRadius: '$xm',
   padding: '$15',
   variants: {
@@ -57,4 +61,11 @@ export const MaxButton = styled(Button, {
     $$color: '$colors$secondary800',
   },
   backgroundColor: '$$color',
+  '&:focus-visible': {
+    $$outline: '$colors$info600',
+    [`.${darkTheme} &`]: {
+      $$outline: '$colors$info100',
+    },
+    outlineColor: '$$outline',
+  },
 });

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

@@ -2,24 +2,28 @@ import { Button } from '../../components';
 import { darkTheme, styled } from '../../theme';
 
 export const Container = styled(Button, {
-  variants: {
-    loading: {
-      true: {
-        '&:hover': {
-          background: 'none',
-        },
-      },
-      false: {
-        '&:hover': {
-          borderRadius: '$xs',
-          $$color: '$colors$info100',
-          [`.${darkTheme} &`]: {
-            $$color: '$colors$neutral400',
-          },
-          backgroundColor: '$$color',
-        },
-      },
+  backgroundColor: 'transparent',
+  color: '$neutral900',
+  '&:disabled': {
+    color: '$neutral800',
+  },
+  '&:focus-visible': {
+    $$color: '$colors$info100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$info700',
+    },
+    backgroundColor: '$$color !important',
+    outline: 0,
+  },
+  '&:disabled:hover': {
+    backgroundColor: 'transparent',
+  },
+  '&:hover': {
+    $$color: '$colors$info100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral400',
     },
+    backgroundColor: '$$color !important',
   },
 });
 

package/src/containers/SwapInput/TokenSection.tsx

@@ -18,7 +18,7 @@ export function TokenSection(props: TokenSectionProps) {
     loading,
   } = props;
   return (
-    <Container variant="ghost" disabled={error || loading} onClick={onClick}>
+    <Container variant="default" disabled={error || loading} onClick={onClick}>
       <TokenSectionContainer>
         <ChainToken
           size="large"