edsadapter 0.0.1

package/src/theme/components/Input.ts

@@ -0,0 +1,98 @@
+import { inputAnatomy } from "@chakra-ui/anatomy";
+import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
+
+const { definePartsStyle, defineMultiStyleConfig } =
+  createMultiStyleConfigHelpers(inputAnatomy.keys);
+
+const base = definePartsStyle({
+  field: {
+    h: { xl: "48px", sm: ".4rem" },
+    fontSize: { xl: "14px", sm: '.12rem' },
+    fontWeight: "500",
+    lineHeight: { xl: "48px", sm: '.4rem' },
+    color: "#C3C6D5",
+    borderRadius: "10px",
+    bg: "#0A0C15",
+    p: { xl: "16px", sm: '.12rem' },
+    pl: { xl: '36px', sm: '.32rem' },
+    border: "1px solid rgba(223, 229, 243, 0.50)",
+    textAlign: "left",
+    _placeholder: {
+      color: "b4",
+    },
+    _disabled: {
+      bg: 'a3',
+      opacity: '1'
+    },
+
+  },
+});
+
+const InputBase = definePartsStyle({
+  field: {
+    h: "40px",
+    fontSize: "12px",
+    fontWeight: "500",
+    lineHeight: "1em",
+    color: "b1",
+    borderRadius: "4px",
+    border: "1px solid #EAEFF4",
+    bg: "a4",
+    p: "16px",
+    textAlign: "center",
+    _placeholder: {
+      color: "b4",
+    },
+  },
+});
+
+const baseStyle = definePartsStyle({
+  field: {
+    _invalid: {
+      border: "1px solid #9A131B",
+      bg: "linear-gradient(88deg, rgba(107, 34, 42, 0.20) 0%, rgba(156, 52, 63, 0.20) 100%)",
+    },
+  },
+});
+const modalInput = definePartsStyle({
+  field: {
+    h: "40px",
+    fontSize: "12px",
+    fontWeight: "500",
+    color: "a4",
+    border: '1px solid rgba(255, 255, 255, 0.12)',
+    borderRadius: "8px",
+    bg: "#101010",
+    p: "12px",
+    textAlign: "left",
+    _placeholder: {
+      color: "b4",
+    },
+    '&:not(:placeholder-shown)': {
+      bg: 'none',
+    },
+  },
+});
+const loginInput = definePartsStyle({
+  field: {
+    h: "48px",
+    fontSize: "14px",
+    fontWeight: "500",
+    color: "#17191B",
+    bg: "#F8F9FE",
+    borderRadius: "12px",
+    border: "1px solid #E8EAF5",
+    p: "14px 16px",
+    textAlign: "left",
+    _placeholder: {
+      color: "#A1A3B4",
+    },
+  },
+});
+
+
+
+export const inputTheme = defineMultiStyleConfig({
+  variants: { base, InputBase, modalInput, loginInput },
+  baseStyle,
+});

package/src/theme/components/Menu.ts

@@ -0,0 +1,52 @@
+import { menuAnatomy } from '@chakra-ui/anatomy'
+import { createMultiStyleConfigHelpers } from '@chakra-ui/react'
+
+const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(menuAnatomy.keys)
+
+const coinDexTheme = definePartsStyle({
+  list: {
+    bg: '#161616',
+    border: 'none',
+    borderRadius: '12px',
+    p: '10px 12px',
+    minW: '170px',
+  },
+  item: {
+    bg: '#161616',
+    fontSize: '12px',
+    fontWeight: 500,
+    p: '8px 12px',
+    borderRadius: '4px',
+    _hover: {
+      bg: '#1B1B1B',
+    },
+  },
+})
+
+const select = definePartsStyle({
+  list: {
+    bg: '#373737',
+    border: 'none',
+    borderRadius: '10px',
+    p: '10px 10px',
+    minW: '170px',
+  },
+  item: {
+    bg: '#373737',
+    color: '#B3B3B3',
+    fontSize: '12px',
+    fontWeight: 500,
+    p: '6px 6px',
+    borderRadius: '4px',
+    _hover: {
+      color: 'a4',
+    },
+  },
+})
+
+export const menuTheme = defineMultiStyleConfig({
+  variants: {
+    coinDex: coinDexTheme,
+    select,
+  },
+})

package/src/theme/components/Modal.ts

@@ -0,0 +1,44 @@
+import { modalAnatomy } from '@chakra-ui/anatomy'
+import { createMultiStyleConfigHelpers } from '@chakra-ui/react'
+
+const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(modalAnatomy.keys)
+
+const base = definePartsStyle({
+  overlay: {
+    opacity: '0.7 !important',
+    bg: '#000',
+  },
+  dialog: {
+    bg: '#191919',
+    borderRadius: '6px',
+    maxW: '600px',
+    minW: { sm: '300px', xl: '375px' },
+    p: '16px',
+  },
+  header: {
+    p: '0',
+    textAlign: 'center',
+    fontSize: '18px',
+    lineHeight: 1,
+    fontWeight: 600,
+  },
+  closeButton: {
+    top: '24px',
+    right: '24px',
+    '& svg': {
+      boxSize: '14px',
+    },
+  },
+  body: {
+    p: '16px 0px',
+  },
+  footer: {
+    p: '0',
+  },
+})
+
+export const modalTheme = defineMultiStyleConfig({
+  variants: {
+    base,
+  },
+})

package/src/theme/components/NumberInput.ts

@@ -0,0 +1,54 @@
+import { numberInputAnatomy } from "@chakra-ui/anatomy";
+import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
+
+const { definePartsStyle, defineMultiStyleConfig } =
+  createMultiStyleConfigHelpers(numberInputAnatomy.keys);
+
+const base = definePartsStyle({
+  field: {
+    h: { xl: "40px", sm: ".4rem" },
+    fontSize: { xl: "14px", sm: '.14rem' },
+    fontWeight: "500",
+    lineHeight: "40px",
+    color: "b4",
+    borderRadius: ".1rem",
+    bg: "a4",
+    p: { xl: "16px", sm: '.12rem' },
+    border: "1px solid #E5E5E5",
+    textAlign: "right",
+    _placeholder: {
+      color: "b4",
+    },
+    _disabled: {
+      bg: 'a3',
+      opacity: '1'
+    }
+  },
+});
+
+const baseStyle = definePartsStyle({
+  field: {
+    borderRadius: "4px",
+    textAlign: "center",
+    bg: "a4",
+    p: "14px",
+    fontSize: { sm: ".14rem", xl: "14px" },
+    lineHeight: 1,
+    fontWeight: "500",
+    color: "a8",
+    h: "40px",
+    border: "1px solid #EAEFF4",
+    _placeholder: {
+      color: "a8",
+    },
+    _invalid: {
+      border: "1px solid b2",
+      bg: "linear-gradient(88deg, rgba(107, 34, 42, 0.20) 0%, rgba(156, 52, 63, 0.20) 100%)",
+    },
+  },
+});
+
+export const numberInputTheme = defineMultiStyleConfig({
+  variants: { base },
+  baseStyle,
+});

package/src/theme/components/Popover.ts

@@ -0,0 +1,72 @@
+import { popoverAnatomy } from "@chakra-ui/anatomy";
+import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
+
+const { definePartsStyle, defineMultiStyleConfig } =
+  createMultiStyleConfigHelpers(popoverAnatomy.keys);
+const thead = definePartsStyle({
+  content: {
+    w: "90px !important",
+    p: "0",
+    bg: "#14161E",
+    fontSize: "12px",
+    lineHeight: "18px",
+    fontWeight: 500,
+    color: "font",
+    border: "none",
+  },
+  arrow: {
+    boxShadow: "none !important",
+    bg: "#1B1B1B !important",
+  },
+});
+
+const connect = definePartsStyle({
+  content: {
+    w: 'fit-content',
+    maxW: { sm: '300px', xl: '400px' },
+    p: '12px 16px',
+    bg: '#FFF',
+    fontSize: '12px',
+    lineHeight: '1.6em',
+    fontWeight: 500,
+    color: '#222',
+    border: '1px solid #E5E5E5',
+    borderRadius: '4px',
+    zIndex: '9999',
+  },
+  body: {
+    p: 0,
+    zIndex: '9999',
+  },
+  footer: {
+    borderTop: 'none',
+  },
+})
+
+
+const base = definePartsStyle({
+  content: {
+    p: "11px 18px",
+    border: "1px solid #41444E !important",
+    bg: "#11131C",
+    color: "#FFF",
+    borderRadius: "8px",
+    maxW: '400px'
+  },
+  body: {
+    p: 0,
+
+  },
+  footer: {
+    borderTop: "none",
+  },
+});
+
+
+export const popoverTheme = defineMultiStyleConfig({
+  variants: {
+    thead,
+    base,
+    connect
+  },
+});

package/src/theme/components/Progress.ts

@@ -0,0 +1,41 @@
+import { progressAnatomy } from '@chakra-ui/anatomy'
+import { createMultiStyleConfigHelpers } from '@chakra-ui/react'
+const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(progressAnatomy.keys)
+
+const base = definePartsStyle({
+  label: {
+    borderRadius: '35px',
+    h: '8px',
+  },
+  filledTrack: {
+    bg: '#67E1FF',
+    borderRadius: '35px',
+    h: '8px',
+  },
+  track: {
+    bg: '#2F323B',
+    borderRadius: '35px',
+    h: '8px',
+  },
+})
+
+const upload = definePartsStyle({
+  label: {
+    borderRadius: '25px',
+    h: '6px',
+  },
+  filledTrack: {
+    bg: '#4BB957',
+    borderRadius: '25px',
+    h: '6px',
+  },
+  track: {
+    bg: '#E5E5E5',
+    borderRadius: '25px',
+    h: '6px',
+  },
+})
+
+export const progressTheme = defineMultiStyleConfig({
+  variants: { base, upload },
+})

package/src/theme/components/Radio.tsx

@@ -0,0 +1,66 @@
+import { radioAnatomy } from '@chakra-ui/anatomy'
+import { createMultiStyleConfigHelpers } from '@chakra-ui/react'
+
+const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(radioAnatomy.keys)
+
+const coinDexBaseTheme = definePartsStyle({
+  control: {
+    boxSize: '14px',
+    bg: 'a4',
+    _checked: {
+      border: 'none',
+      bg: 'linear-gradient(90deg, rgba(255, 80, 132, 1) 0%, rgba(157, 98, 221, 1) 50%, rgba(26, 97, 253, 1) 100%)',
+      _before: {
+        boxSize: '8px',
+        bg: 'a4',
+      },
+    },
+    _focus: {
+      boxShadow: 'initial',
+    },
+  },
+  label: {
+    flexGrow: 1,
+    color: 'font',
+    fontSize: '12px',
+    fontWeight: 500,
+    ml: '8px',
+  },
+})
+
+const coinDexTickTheme = definePartsStyle({
+  control: {
+    boxSize: '16px',
+    border: '1.5px solid #73778A',
+    borderRadius: '50%',
+    _checked: {
+      border: 'none',
+      bgImage: 'url(/imgs/tick.png)',
+      bgSize: '100% 100%',
+      _before: {
+        content: 'initial',
+      },
+      _hover: {
+        bgImage: 'url(/imgs/tick.png)!important',
+        bgSize: '100% 100% !important',
+      },
+    },
+    _focus: {
+      boxShadow: 'initial',
+    },
+  },
+  label: {
+    flexGrow: 1,
+    color: 'font',
+    fontSize: '14px',
+    fontWeight: { sm: 400, xl: 500 },
+    ml: '14px',
+  },
+})
+
+export const radioTheme = defineMultiStyleConfig({
+  variants: {
+    'coinDex-base': coinDexBaseTheme,
+    'coinDex-tick': coinDexTickTheme,
+  },
+})

package/src/theme/components/Switch.ts

@@ -0,0 +1,30 @@
+import { defineStyle, defineStyleConfig } from '@chakra-ui/react'
+
+const base = defineStyle({
+  container: {
+    '--switch-track-width': { sm: '44px', xl: '48px' } as any,
+    '--switch-track-diff': { sm: 'calc(44px - 22px)', xl: 'calc(48px - 24px)' } as any,
+  },
+  track: {
+    bg: 'c8',
+    p: '0px',
+    h: { sm: '20px', xl: '24px' },
+    w: { sm: '44px', xl: '48px' },
+    _checked: {
+      bg: '#33D26A',
+    },
+  },
+  thumb: {
+    h: { sm: '16px', xl: '18px' },
+    w: { sm: '16px', xl: '18px' },
+    bg: 'a4',
+    mt: '3px',
+    ml: '3px',
+  },
+})
+
+export const switchTheme = defineStyleConfig({
+  variants: {
+    base,
+  },
+})

package/src/theme/components/Table.ts

@@ -0,0 +1,149 @@
+import { tableAnatomy } from "@chakra-ui/anatomy";
+import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
+
+const { definePartsStyle, defineMultiStyleConfig } =
+  createMultiStyleConfigHelpers(tableAnatomy.keys);
+
+const base = definePartsStyle(() => {
+  return {
+    table: {
+      bg: "#232630",
+      px: '0',
+      // border: '1px solid #1C1C1C',
+      borderRadius: "0",
+    },
+    thead: {
+      bg: '#14161E',
+      th:{
+        h: { xl: "36px", sm: '.32rem' },
+      }
+    },
+    th: {
+      // py: "25px",
+      p: { xl: "12px 24px", sm: '.1rem .16rem' },
+      fontSize: "14px",
+      h: { xl: "44px", sm: '.4rem' },
+      lineHeight: "1em",
+      fontWeight: "500",
+      color: "#D1D4E2",
+      textTransform: "initial",
+      borderBottom: "1px solid #2B2E35",
+      fontFamily: "Manrope Variable; sans-serif !important",
+      letterSpacing: '0'
+
+    },
+    tbody: {
+      fontSize: "14px",
+      fontWeight: "500",
+      color: "a4",
+      tr: {
+        borderBottom: "1px dashed #2B2E35",
+        h: { xl: "44px", sm: '.4rem' },
+        _even:{
+          bg:'#14161E'
+        },
+        _hover: {
+          pos: "relative",
+          zIndex: 0,
+          bg: "#2F323D",
+          _after: {
+            content: '""',
+            pos: "absolute",
+            left: 0,
+            top: 0,
+            boxSize: "100%",
+            bg: "#2F323D",
+            borderRadius: "4px",
+            zIndex: -1,
+          },
+        },
+        _last: {
+          textAlign: "right",
+          borderBottom: 'none'
+        },
+      },
+    },
+    td: {
+      p: { xl: "12px 24px", sm: '.1rem .16rem' },
+      lineHeight: "1.5em",
+      minH: { xl: "48px", sm: '.4rem' },
+    },
+  };
+});
+
+const holder = definePartsStyle(() => {
+  return {
+    table: {
+      bg: "#232630",
+      px: '0',
+      // border: '1px solid #1C1C1C',
+      borderRadius: "0",
+    },
+    thead: {
+      bg: '#14161E',
+      th:{
+        h: { xl: "36px", sm: '.32rem' },
+      }
+    },
+    th: {
+      // py: "25px",
+      p: { xl: "12px 15px", sm: '.1rem .14rem' },
+      fontSize: "14px",
+      h: { xl: "44px", sm: '.4rem' },
+      lineHeight: "1em",
+      fontWeight: "500",
+      color: "#D1D4E2",
+      textTransform: "initial",
+      borderBottom: "1px solid #2B2E35",
+      fontFamily: "Manrope Variable; sans-serif !important",
+      letterSpacing: '0'
+
+    },
+    tbody: {
+      fontSize: "14px",
+      fontWeight: "500",
+      color: "a4",
+      tr: {
+        borderBottom: "1px dashed #2B2E35",
+        h: { xl: "44px", sm: '.4rem' },
+        _even:{
+          bg:'#14161E'
+        },
+        _hover: {
+          pos: "relative",
+          zIndex: 0,
+          bg: "#2F323D",
+          _after: {
+            content: '""',
+            pos: "absolute",
+            left: 0,
+            top: 0,
+            boxSize: "100%",
+            bg: "#2F323D",
+            borderRadius: "4px",
+            zIndex: -1,
+          },
+        },
+        _last: {
+          textAlign: "right",
+          borderBottom: 'none'
+        },
+      },
+    },
+    td: {
+      p: { xl: "12px 15px", sm: '.1rem .16rem' },
+      lineHeight: "1.5em",
+      minH: { xl: "48px", sm: '.4rem' },
+    },
+  };
+});
+
+
+
+const variants = {
+  base,
+  holder
+};
+
+// export the component theme
+export const tableTheme = defineMultiStyleConfig({ variants });

package/src/theme/components/Tabs.ts

@@ -0,0 +1,90 @@
+import { tabsAnatomy } from '@chakra-ui/anatomy'
+import { createMultiStyleConfigHelpers } from '@chakra-ui/react'
+
+const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(tabsAnatomy.keys)
+
+const base = definePartsStyle({
+  root: {},
+  tablist: {
+    pb: '24px',
+    borderBottom: '1px solid #3D3D3D',
+  },
+  tab: {
+    h: '40px',
+    p: '0 16px',
+    color: 'a4',
+    fontSize: { sm: '12px', xl: '16px' },
+    fontWeight: 500,
+    lineHeight: '1em',
+    borderRadius: '10px',
+    _selected: {
+      bg: '#282828',
+      color: 'a4',
+    },
+  },
+  tabpanel: {
+    p: '20px 0 0 0',
+  },
+})
+
+const buttonGroup = definePartsStyle({
+  root: {},
+  tablist: {
+    color: 'a4',
+    bg: '#1B1B1B',
+    borderRadius: '12px',
+    p: '4px',
+  },
+  tab: {
+    h: '42px',
+    p: '0 30px',
+    color: 'a4',
+    fontSize: { sm: '12px', xl: '16px' },
+    fontWeight: 600,
+    lineHeight: '1em',
+    borderRadius: '8px',
+    _selected: {
+      bg: '#373737',
+      color: 'a4',
+    },
+  },
+  tabpanel: {
+    p: 0,
+  },
+})
+
+const tableGroup = definePartsStyle({
+  root: {},
+  tablist: {
+    bg: 'none',
+    borderTopRadius: '10px',
+    pt: '16px',
+    fontFamily: "PingFang SC"
+  },
+  tab: {
+    h: '56px',
+    p: '0 30px',
+    color: '#878EA3',
+    bg: '#14161E',
+    fontSize: { sm: '12px', xl: '14px' },
+    fontWeight: 400,
+    borderTopRadius: '10px',
+    _selected: {
+      bg: '#232630',
+      color: '#FFF',
+    },
+  },
+  tabpanel: {
+    p: 0,
+  },
+})
+
+
+const variants = {
+  base,
+  buttonGroup,
+  tableGroup
+}
+
+// export the component theme
+export const tabsTheme = defineMultiStyleConfig({ variants })