@multiplatform.one/web3 5.0.27

package/src/connectkit/styles/themes/rounded.ts

@@ -0,0 +1,139 @@
+export default {
+  '--ck-font-family':
+    '"Nunito",ui-rounded,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,"Apple Color Emoji",Arial,sans-serif,"Segoe UI Emoji","Segoe UI Symbol"',
+  '--ck-border-radius': '24px',
+
+  '--ck-connectbutton-font-size': '17px',
+  '--ck-connectbutton-font-weight': '700',
+  '--ck-connectbutton-border-radius': '14px',
+  '--ck-connectbutton-color': '#000000',
+  '--ck-connectbutton-background': '#ffffff',
+  '--ck-connectbutton-box-shadow':
+    'inset 0 0 0 2px #DFE4EC, 0 2px 0 0 #DFE4EC, 0px 2px 4px rgba(0, 0, 0, 0.02)',
+
+  '--ck-connectbutton-hover-background': '#F9FAFB',
+
+  '--ck-connectbutton-balance-color': '#414451',
+  '--ck-connectbutton-balance-background': '#F9FAFB',
+  '--ck-connectbutton-balance-box-shadow':
+    '0 2px 0 0 #DFE4EC, 0px 2px 4px rgba(0, 0, 0, 0.02)',
+
+  '--ck-connectbutton-balance-hover-background': '#F5F7F9',
+  '--ck-connectbutton-balance-hover-box-shadow':
+    '0 2px 0 0 #DFE4EC, 0px 2px 4px rgba(0, 0, 0, 0.02)',
+  '--ck-connectbutton-balance-active-box-shadow':
+    '0 0 0 0 #DFE4EC, 0px 2px 4px rgba(0, 0, 0, 0.02)',
+
+  '--ck-connectbutton-active-background': '#F5F7F9',
+  '--ck-connectbutton-active-box-shadow':
+    'inset 0 0 0 2px #CFD7E2, 0 0px 0 0 #CFD7E2, 0px 2px 4px rgba(0, 0, 0, 0.02)',
+
+  '--ck-primary-button-border-radius': '18px',
+  '--ck-primary-button-color': '#000000',
+  '--ck-primary-button-background': '#ffffff',
+  '--ck-primary-button-box-shadow':
+    'inset 0 0 0 2px #DFE4EC, inset  0 -4px 0 0 #DFE4EC, 0px 2px 4px rgba(0, 0, 0, 0.02)',
+
+  '--ck-primary-button-hover-background': '#F5F7F9',
+  '--ck-primary-button-hover-box-shadow':
+    'inset 0 0 0 2px #DFE4EC, inset  0 -2px 0 0 #DFE4EC, 0px 2px 4px rgba(0, 0, 0, 0.02)',
+
+  '--ck-secondary-button-border-radius': '16px',
+  '--ck-secondary-button-color': '#000000',
+  '--ck-secondary-button-background': '#ffffff',
+  '--ck-secondary-button-box-shadow':
+    'inset 0 0 0 2px #DFE4EC, inset  0 -4px 0 0 #DFE4EC, 0px 2px 4px rgba(0, 0, 0, 0.02)',
+
+  '--ck-secondary-button-hover-background': '#F5F7F9',
+  '--ck-secondary-button-hover-box-shadow':
+    'inset 0 0 0 2px #DFE4EC, inset  0 -2px 0 0 #DFE4EC, 0px 2px 4px rgba(0, 0, 0, 0.02)',
+
+  '--ck-focus-color': '#1A88F8',
+  '--ck-modal-box-shadow': `0px 3px 16px rgba(0, 0, 0, 0.08)`,
+  '--ck-body-color': '#000000',
+  '--ck-body-color-muted': '#93989F',
+  '--ck-body-color-muted-hover': '#000000',
+  '--ck-body-background': '#ffffff',
+  '--ck-body-background-transparent': 'rgba(255,255,255,0)',
+  '--ck-body-background-secondary': '#f6f7f9',
+  '--ck-body-background-secondary-hover-background': '#e0e4eb',
+  '--ck-body-background-secondary-hover-outline': '#4282FF',
+  '--ck-body-background-tertiary': '#ffffff',
+  '--ck-tertiary-border-radius': '22px',
+  '--ck-tertiary-box-shadow':
+    'inset 0 0 0 2px #DFE4EC, 0px 2px 4px rgba(0, 0, 0, 0.02)',
+
+  '--ck-body-action-color': '#93989F',
+  '--ck-body-divider': '#DFE4EC',
+  '--ck-body-color-danger': '#FF4E4E',
+  '--ck-body-color-valid': '#32D74B',
+
+  '--ck-body-disclaimer-background': '#F9FAFB',
+  '--ck-body-disclaimer-font-size': '14px',
+  '--ck-body-disclaimer-font-weight': '700',
+  '--ck-body-disclaimer-color': '#959697',
+  '--ck-body-disclaimer-link-color': '#646464',
+  '--ck-body-disclaimer-link-hover-color': '#000000',
+
+  '--ck-copytoclipboard-stroke': '#CCCCCC',
+
+  '--ck-tooltip-background': '#ffffff',
+  '--ck-tooltip-background-secondary': '#ffffff',
+  '--ck-tooltip-color': '#999999',
+  '--ck-tooltip-shadow': ' 0 0 0 2px #DFE4EC, 0px 2px 4px rgba(0, 0, 0, 0.02)',
+
+  '--ck-spinner-color': 'var(--ck-focus-color)',
+
+  '--ck-dropdown-button-color': '#999999',
+  '--ck-dropdown-button-box-shadow':
+    '0 0 0 2px #DFE4EC,  0 2px 0 2px #DFE4EC, 0px 2px 4px rgba(0, 0, 0, 0.02)',
+  '--ck-dropdown-button-background': '#fff',
+
+  '--ck-dropdown-button-hover-color': '#8B8B8B',
+  '--ck-dropdown-button-hover-background': '#F5F7F9',
+
+  '--ck-dropdown-pending-color': '#848D9A',
+  '--ck-dropdown-active-color': '#000000',
+  '--ck-dropdown-active-static-color': '#848D9A',
+  '--ck-dropdown-active-background': '#F5F7F9',
+  '--ck-dropdown-color': '#848D9A',
+  '--ck-dropdown-background': '#FFFFFF',
+  '--ck-dropdown-box-shadow': '0px 2px 15px rgba(0, 0, 0, 0.15)',
+  '--ck-dropdown-border-radius': '16px',
+
+  '--ck-alert-color': '#848D9A',
+  '--ck-alert-background': '#F5F7F9',
+
+  '--ck-qr-border-radius': '24px',
+  '--ck-qr-dot-color': '#111111',
+  '--ck-qr-border-color': '#DFE4EC',
+
+  '--ck-modal-h1-font-weight': '700',
+  '--ck-modal-heading-font-weight': '700',
+  '--ck-primary-button-font-weight': '700',
+
+  '--ck-recent-badge-box-shadow': 'inset 0 0 0 2px currentColor',
+  '--ck-recent-badge-top-offset': '0px',
+
+  /** Graphics options for our themes, not to be exposed to devs */
+  /*
+  '--ck-graphic-primary-color': '#6C7381',
+  '--ck-graphic-primary-background': '#ffffff',
+  '--ck-graphic-primary-box-shadow': 'inset 0 0 0 2px #DFE4EC',
+
+  '--ck-graphic-secondary-color': '#DFE4EC',
+  '--ck-graphic-secondary-background': '#ffffff',
+  '--ck-graphic-secondary-box-shadow': 'inset 0 0 0 2px #DFE4EC',
+
+  '--ck-graphic-compass-color': '#ffffff',
+  '--ck-graphic-compass-background': '#6C7381',
+  '--ck-graphic-compass-box-shadow': 'inset 0 0 0 2px rgba(0,0,0,0.1)',
+
+  '--ck-graphic-globe-background':
+    'radial-gradient(84.37% 84.37% at 50% 15.63%, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(180deg, #DFE4EC 0%, #DFE4EC 114.06%), #DFE4EC',
+  '--ck-graphic-globe-lines': '#ffffff',
+  '--ck-graphic-globe-box-shadow': 'inset 0 0 0 2px #DFE4EC',
+  */
+
+  '--ck-siwe-border': '#DFE4EC',
+};

package/src/connectkit/styles/themes/soft.ts

@@ -0,0 +1,95 @@
+export default {
+  '--ck-border-radius': '12px',
+
+  '--ck-connectbutton-font-size': '17px',
+  '--ck-connectbutton-border-radius': '12px',
+  '--ck-connectbutton-color': '#414451',
+  '--ck-connectbutton-background': '#ffffff',
+  '--ck-connectbutton-box-shadow':
+    'inset 0 0 0 1px #E9EAEC, 0px 2px 4px rgba(0, 0, 0, 0.02)',
+
+  '--ck-connectbutton-hover-background': '#F6F7F9',
+  '--ck-connectbutton-hover-box-shadow':
+    'inset 0 0 0 1px #E9EAEC, 0px 2px 4px rgba(0, 0, 0, 0.02)',
+
+  '--ck-connectbutton-balance-color': '#373737',
+  '--ck-connectbutton-balance-background': '#F6F7F9',
+  '--ck-connectbutton-balance-box-shadow': 'none',
+
+  '--ck-connectbutton-balance-hover-background': '#f1f1f3',
+
+  '--ck-primary-button-border-radius': '12px',
+  '--ck-primary-button-color': '#414451',
+  '--ck-primary-button-background': '#ffffff',
+  '--ck-primary-button-box-shadow':
+    '0 0 0 1px #E9EAEC, 0px 2px 4px rgba(0, 0, 0, 0.02)',
+
+  '--ck-primary-button-hover-background': '#F6F7F9',
+  '--ck-primary-button-hover-box-shadow':
+    '0 0 0 1px #D9DBDD, 0px 0 0 rgba(0, 0, 0, 0.02)',
+
+  '--ck-secondary-button-border-radius': '12px',
+  '--ck-secondary-button-color': '#414451',
+  '--ck-secondary-button-background': '#ffffff',
+  '--ck-secondary-button-box-shadow':
+    '0 0 0 1px #E9EAEC, 0px 2px 4px rgba(0, 0, 0, 0.02)',
+
+  '--ck-secondary-button-hover-background': '#F6F7F9',
+  '--ck-secondary-button-hover-box-shadow':
+    '0 0 0 1px #D9DBDD, 0px 0 0 rgba(0, 0, 0, 0.02)',
+
+  '--ck-focus-color': '#1A88F8',
+  '--ck-modal-box-shadow': `0px 3px 16px rgba(0, 0, 0, 0.08)`,
+  '--ck-body-color': '#414451',
+  '--ck-body-color-muted': '#9196A1',
+  '--ck-body-color-muted-hover': '#000000',
+  '--ck-body-background': '#ffffff',
+  '--ck-body-background-transparent': 'rgba(255,255,255,0)',
+  '--ck-body-background-secondary': '#f6f7f9',
+  '--ck-body-background-secondary-hover-background': '#e0e4eb',
+  '--ck-body-background-secondary-hover-outline': '#4282FF',
+  '--ck-body-background-tertiary': '#F6F8FA',
+  '--ck-tertiary-border-radius': '13px',
+  '--ck-tertiary-box-shadow': 'inset 0 0 0 1px rgba(0, 0, 0, 0.04)',
+
+  '--ck-body-action-color': '#999999',
+  '--ck-body-divider': '#f7f6f8',
+  '--ck-body-color-danger': '#FF4E4E',
+  '--ck-body-color-valid': '#32D74B',
+
+  '--ck-body-disclaimer-background': '#F9FAFA',
+  '--ck-body-disclaimer-color': '#AFB1B6',
+  '--ck-body-disclaimer-link-color': '#787B84',
+  '--ck-body-disclaimer-link-hover-color': '#000000',
+
+  '--ck-copytoclipboard-stroke': '#CCCCCC',
+
+  '--ck-tooltip-background': '#ffffff',
+  '--ck-tooltip-background-secondary': '#ffffff',
+  '--ck-tooltip-color': '#999999',
+  '--ck-tooltip-shadow': '0px 2px 10px rgba(0, 0, 0, 0.08)',
+
+  '--ck-spinner-color': 'var(--ck-focus-color)',
+
+  '--ck-dropdown-button-color': '#999999',
+  '--ck-dropdown-button-box-shadow':
+    '0 0 0 1px rgba(0, 0, 0, 0.01), 0px 0px 7px rgba(0, 0, 0, 0.05)',
+  '--ck-dropdown-button-background': '#fff',
+
+  '--ck-dropdown-button-hover-color': '#8B8B8B',
+  '--ck-dropdown-button-hover-background': '#E7E7E7',
+
+  '--ck-dropdown-color': 'rgba(55, 55, 55, 0.4)',
+  '--ck-dropdown-box-shadow': '0px 2px 15px rgba(0, 0, 0, 0.15)',
+
+  '--ck-alert-color': '#9196A1',
+  '--ck-alert-background': '#F6F8FA',
+  '--ck-alert-box-shadow': 'inset 0 0 0 1px rgba(0, 0, 0, 0.04)',
+  '--ck-alert-border-radius': '8px',
+
+  '--ck-qr-border-radius': '12px',
+  '--ck-qr-dot-color': '#2E3138',
+  '--ck-qr-border-color': '#E9EAEC',
+
+  '--ck-siwe-border': '#EAEBED',
+};

package/src/connectkit/styles/themes/web95.ts

@@ -0,0 +1,173 @@
+export default {
+  '--ck-font-family': 'Lato',
+  '--ck-border-radius': '0px',
+
+  '--ck-connectbutton-color': '#373737',
+  '--ck-connectbutton-background':
+    'linear-gradient(180deg, #F0F0EA 0%, #FFFFFF 50%, #F0F0EA 100%) 100% 100% / 200% 200%, #F5F5F1',
+  '--ck-connectbutton-box-shadow':
+    ' 0 0 0 1px #003C74, 2px 2px 0px rgba(255, 255, 255, 0.75), -2px -2px 0px rgba(0, 0, 0, 0.05), inset 0px 0px 0px 0px #97B9EC, inset -1px -2px 2px rgba(0, 0, 0, 0.2)',
+  '--ck-connectbutton-border-radius': '4.5px',
+
+  '--ck-connectbutton-hover-color': '#373737',
+  '--ck-connectbutton-hover-background':
+    'linear-gradient(180deg, #F0F0EA 0%, #FFFFFF 50%, #F0F0EA 100%) 100% 0% / 200% 200%, #F5F5F1',
+
+  '--ck-connectbutton-active-background':
+    'linear-gradient(180deg, #F0F0EA 0%, #FFFFFF 50%, #F0F0EA 100%) 100% 100% / 200% 200%, #F5F5F1',
+
+  '--ck-connectbutton-balance-color': '#373737',
+  '--ck-connectbutton-balance-background': '#fff',
+  '--ck-connectbutton-balance-box-shadow': '0 0 0 1px #E4E7E7',
+  '--ck-connectbutton-balance-hover-box-shadow': '0 0 0 1px #d7dbdb',
+  '--ck-connectbutton-balance-active-box-shadow': '0 0 0 1px #bbc0c0',
+
+  '--ck-focus-color': '#1A88F8',
+  '--ck-overlay-background': 'rgba(0, 127,  128, 0.8)',
+  '--ck-body-color': '#373737',
+  '--ck-body-color-muted': '#808080',
+  '--ck-body-color-muted-hover': '#111111',
+  '--ck-body-background': '#F0EDE2',
+  '--ck-body-background-transparent': 'rgba(255,255,255,0)',
+  '--ck-body-background-secondary-hover-background': '#FAFAFA',
+  '--ck-body-background-secondary-hover-outline': '#4282FF',
+  '--ck-body-action-color': '#373737',
+  '--ck-body-color-danger': '#FC6464',
+  '--ck-body-color-valid': '#32D74B',
+
+  '--ck-body-divider': '#919B9C',
+  '--ck-body-divider-box-shadow': '0px 1px 0px #FBFBF8',
+
+  // Primary button
+  '--ck-primary-button-background':
+    'linear-gradient(180deg, #FFFFFF 0%, #F0F0EA 100%), #F5F5F1',
+  '--ck-primary-button-box-shadow':
+    'inset 0 0 0 1px #003C74, 1px 1px 0px rgba(255, 255, 255, 0.75), -1px -1px 0px rgba(0, 0, 0, 0.05), inset 0px 0px 0px 0px #97B9EC, inset -1px -2px 2px rgba(0, 0, 0, 0.2)',
+  '--ck-primary-button-border-radius': '6px',
+
+  // Primary button hover
+  '--ck-primary-button-hover-box-shadow':
+    'inset 0 0 0 1px #003C74, 1px 1px 0px rgba(255, 255, 255, 0.75), -1px -1px 0px rgba(0, 0, 0, 0.05), inset 0px 0px 0px 5px #97B9EC, inset -1px -2px 2px rgba(0, 0, 0, 0.2)',
+  '--ck-primary-button-hover-border-radius': '6px',
+
+  // Modal
+  '--ck-modal-heading-font-weight': 400,
+  '--ck-modal-box-shadow': `
+    inset 0px -3px 0px #0F37A9,
+    inset -2px 0px 0px #0F37A9,
+    inset 0px -4px 0px #0D5DDF,
+    inset -4px 0px 0px #0D5DDF,
+    inset 2px 0px 0px #0453DD,
+    inset 0px 2px 0px #044FD1,
+    inset 4px 0px 0px #4283EB,
+    inset 0px 4px 0px #4283EB
+  `,
+  '--ck-modal-h1-font-weight': 400,
+
+  // Secondary button
+  '--ck-secondary-button-color': '#373737',
+  '--ck-secondary-button-border-radius': '6px',
+  '--ck-secondary-button-box-shadow':
+    'inset 0 0 0 1px #003C74, 1px 1px 0px rgba(255, 255, 255, 0.75), -1px -1px 0px rgba(0, 0, 0, 0.05), inset 0px 0px 0px 0px #97B9EC, inset -1px -2px 2px rgba(0, 0, 0, 0.2)',
+  '--ck-secondary-button-background':
+    'linear-gradient(180deg, #FFFFFF 0%, #F0F0EA 100%), #F5F5F1',
+
+  // Secondary button hover
+  '--ck-secondary-button-hover-box-shadow':
+    'inset 0 0 0 1px #003C74, 1px 1px 0px rgba(255, 255, 255, 0.75), -1px -1px 0px rgba(0, 0, 0, 0.05), inset 0px 0px 0px 4px #97B9EC, inset -1px -2px 2px rgba(0, 0, 0, 0.2)',
+
+  '--ck-body-background-secondary': 'rgba(0, 0, 0, 0.1)',
+  '--ck-body-background-tertiary':
+    'linear-gradient(180deg, #FBFBFB 0%, #EFEFEE 100%)',
+  '--ck-tertiary-border-radius': '0px',
+  '--ck-tertiary-box-shadow':
+    'inset 0 0 0 1px #919B9C, 1px 1px 2px rgba(0, 0, 0, 0.15), inset -2px -2px 0px #FFFFFF',
+  '--ck-body-button-text-align': 'left',
+  '--ck-body-button-box-shadow': '0 2px 4px rgba(0, 0, 0, 0.05 )',
+
+  '--ck-body-disclaimer-background':
+    'linear-gradient(180deg, #FBFBFB 0%, #EFEFEE 100%)',
+  '--ck-body-disclaimer-box-shadow': `
+    inset 0px -3px 0px #0F37A9,
+    inset -2px 0px 0px #0F37A9,
+    inset 0px -4px 0px #0D5DDF,
+    inset -4px 0px 0px #0D5DDF,
+    inset 2px 0px 0px #0453DD,
+    inset 4px 0px 0px #4283EB,
+    inset 0 1px 0 0 #919B9C`,
+  '--ck-body-disclaimer-font-size': '14px',
+  '--ck-body-disclaimer-color': '#959594',
+  '--ck-body-disclaimer-link-color': '#626262',
+  '--ck-body-disclaimer-link-hover-color': '#000000',
+
+  '--ck-qr-dot-color': '#000000',
+  '--ck-qr-border-color': '#919B9C',
+  '--ck-qr-border-radius': '0',
+  '--ck-qr-background': '#FFFFFF',
+
+  '--ck-copytoclipboard-stroke': 'rgba(55, 55, 55, 0.4)',
+
+  '--ck-tooltip-background':
+    'linear-gradient(270deg, #F7F3E6 7.69%, #F5F7DA 100%)',
+  '--ck-tooltip-background-secondary': '#f6f7f9',
+  '--ck-tooltip-color': '#000000',
+  '--ck-tooltip-shadow':
+    ' 0 0 0 1.5px #2b2622, 0px 2px 10px rgba(0, 0, 0, 0.08)',
+
+  '--ck-spinner-color': 'var(--ck-focus-color)',
+
+  '--ck-dropdown-button-color': '#999999',
+  '--ck-dropdown-button-box-shadow':
+    '0 0 0 1px #A0A0A0, 1px 1px 0px rgba(255, 255, 255, 0.75), -1px -1px 0px rgba(0, 0, 0, 0.05), inset -1px -2px 2px rgba(0, 0, 0, 0.2)',
+  '--ck-dropdown-button-background':
+    'linear-gradient(180deg, #FFFFFF 0%, #F0F0EA 100%), #F5F5F1',
+  '--ck-dropdown-button-hover-background':
+    'linear-gradient(0deg, #FFFFFF 0%, #F0F0EA 100%), #F5F5F1',
+
+  '--ck-dropdown-pending-color': '#ACA899',
+  '--ck-dropdown-active-color': '#FFFFFF',
+  '--ck-dropdown-active-static-color': '#ACA899',
+  '--ck-dropdown-active-background': '#3F69BF',
+  '--ck-dropdown-active-border-radius': '0',
+  '--ck-dropdown-active-inset': '-12px',
+  '--ck-dropdown-color': '#ACA899',
+  '--ck-dropdown-background': '#FFFFFF',
+  '--ck-dropdown-box-shadow':
+    'inset 0 0 0 1px #ACA899, 2px 2px 7px rgba(0, 0, 0, 0.15)',
+  '--ck-dropdown-border-radius': '0',
+
+  '--ck-alert-color': '#ACA899',
+  '--ck-alert-background': 'linear-gradient(180deg, #FBFBFB 0%, #EFEFEE 100%)',
+  '--ck-alert-box-shadow':
+    'inset 0 0 0 1px #919B9C, 1px 1px 2px rgba(0, 0, 0, 0.15), inset -2px -2px 0px #FFFFFF',
+  '--ck-alert-border-radius': '0',
+
+  '--ck-recent-badge-border-radius': '32px',
+  '--ck-recent-badge-top-offset': '0px',
+
+  /** Graphics options for our themes, not to be exposed to devs */
+
+  '--ck-graphic-primary-color': '#333333',
+  '--ck-graphic-primary-background': '#FFFFFF',
+  /*
+  '--ck-graphic-secondary-color': '#7D7D7D',
+  '--ck-graphic-secondary-background':
+    'linear-gradient(180deg, #FFFFFF 0%, #F0F0EA 100%), #F5F5F1',
+  '--ck-graphic-secondary-box-shadow':
+    'inset 0 0 0 1px #003C74, 1px 1px 0px rgba(255, 255, 255, 0.75), -1px -1px 0px rgba(0, 0, 0, 0.05), inset 0px 0px 0px 0px #97B9EC, inset -1px -2px 2px rgba(0, 0, 0, 0.2)',
+
+  '--ck-graphic-compass-color': '#7D7D7D',
+  */
+  '--ck-graphic-compass-background': '#FFFFFF',
+  /*
+  '--ck-graphic-compass-box-shadow':
+    'inset 0 0 0 1px #003C74, 1px 1px 0px rgba(255, 255, 255, 0.75), -1px -1px 0px rgba(0, 0, 0, 0.05), inset 0px 0px 0px 0px #97B9EC, inset -1px -2px 2px rgba(0, 0, 0, 0.2)',
+
+  '--ck-graphic-globe-background': '#ffffff',
+  '--ck-graphic-globe-lines': '#808080',
+  '--ck-graphic-globe-box-shadow':
+    ' 0 0 0 1px #999A9E, 1px 1px 0px rgba(255, 255, 255, 0.75), -1px -1px 0px rgba(0, 0, 0, 0.05), inset 0px 0px 0px 0px #97B9EC',
+    */
+
+  '--ck-siwe-border': '#919B9C',
+};

package/src/connectkit/styles/types.ts

@@ -0,0 +1,84 @@
+type RGB = `rgb(${number}, ${number}, ${number})`;
+type RGBA = `rgba(${number}, ${number}, ${number}, ${number})`;
+type HEX = `#${string}`;
+type Color = RGB | RGBA | HEX;
+
+type BorderRadius = number | string;
+type Font = {
+  family?: string;
+};
+
+interface Button {
+  font?: Font;
+  color?: Color;
+  background?: Color;
+  border?: Color;
+  borderRadius?: BorderRadius;
+  hover?: this;
+}
+
+interface Text {
+  color?: Color;
+  font?: Font;
+  hover?: this;
+}
+
+export type Theme = {
+  font?: Font;
+  primary?: {
+    color?: Color;
+    colorSelected?: Color;
+  };
+  error?: {
+    color?: Color;
+  };
+  text?: {
+    primary?: Text;
+    secondary?: Text;
+    error?: Color;
+    valid?: Color;
+  };
+  navigation?: {
+    color?: Color;
+  };
+  buttons?: {
+    primary?: Button;
+    secondary?: Button;
+  };
+  modal?: {
+    divider: Color;
+    background?: Color;
+    boxShadow?: string;
+    borderRadius?: BorderRadius;
+  };
+  overlay?: {
+    background?: Color;
+    backdropFilter?: string;
+  };
+  tooltips?: {
+    color?: Color;
+    background?: Color;
+    hover?: {
+      color?: Color;
+      background?: Color;
+    };
+  };
+  qrCode?: {
+    background?: Color;
+    accentColor?: Color;
+  };
+};
+
+export type ThemeMode = {
+  preferred: 'light' | 'dark';
+  light: Theme;
+  dark: Theme;
+};
+export type CustomTheme = {
+  connectKit: {
+    options?: {
+      iconStyle?: 'light' | 'regular' | 'heavy';
+    };
+    theme?: Theme | ThemeMode;
+  };
+};

package/src/connectkit/types.ts

@@ -0,0 +1,24 @@
+import { Languages as Lang } from './localizations';
+export type Languages = Lang;
+
+export type Theme =
+  | 'auto'
+  | 'web95'
+  | 'retro'
+  | 'soft'
+  | 'midnight'
+  | 'minimal'
+  | 'rounded'
+  | 'nouns';
+export type Mode = 'light' | 'dark' | 'auto';
+export type CustomTheme = any; // TODO: define type
+
+export type All = {
+  theme?: Theme;
+  mode?: Mode;
+  customTheme?: CustomTheme;
+  lang?: Languages;
+};
+
+export type { ConnectKitOptions } from './components/ConnectKit';
+export type { CustomAvatarProps } from './components/Common/Avatar';

package/src/connectkit/utils/index.ts

@@ -0,0 +1,132 @@
+import React from 'react';
+import { detect } from 'detect-browser';
+
+const truncateRegex = /^(0x[a-zA-Z0-9]{4})[a-zA-Z0-9]+([a-zA-Z0-9]{4})$/;
+
+const truncateEthAddress = (address?: string, separator: string = '••••') => {
+  if (!address) return '';
+  const match = address.match(truncateRegex);
+  if (!match) return address;
+  return `${match[1]}${separator}${match[2]}`;
+};
+
+const truncateENSAddress = (ensName: string, maxLength: number) => {
+  if (ensName.length > maxLength) {
+    return ensName.replace('.eth', '').slice(0, maxLength) + '...';
+  } else {
+    return ensName;
+  }
+};
+
+const nFormatter = (num: number, digits: number = 2) => {
+  if (num < 10000) return num.toFixed(2);
+  const lookup = [
+    { value: 1, symbol: '' },
+    { value: 1e3, symbol: 'k' },
+    { value: 1e6, symbol: 'm' },
+    { value: 1e9, symbol: 'b' },
+    { value: 1e12, symbol: 't' },
+    { value: 1e15, symbol: 'p' },
+    { value: 1e18, symbol: 'e' },
+  ];
+
+  const rx = /\.0+$|(\.[0-9]*[1-9])0+$/;
+  var item = lookup
+    .slice()
+    .reverse()
+    .find(function (item) {
+      return num >= item.value;
+    });
+  return item
+    ? (num / item.value).toFixed(digits).replace(rx, '$1') + item.symbol
+    : '0';
+};
+
+const detectBrowser = () => {
+  const browser = detect();
+  return browser?.name ?? '';
+};
+const detectOS = () => {
+  const browser = detect();
+  return browser?.os ?? '';
+};
+
+const isIOS = () => {
+  const os = detectOS();
+  return os.toLowerCase().includes('ios');
+};
+const isAndroid = () => {
+  const os = detectOS();
+  return os.toLowerCase().includes('android');
+};
+const isMobile = () => {
+  return isAndroid() || isIOS();
+};
+
+type ReactChildArray = ReturnType<typeof React.Children.toArray>;
+function flattenChildren(children: React.ReactNode): ReactChildArray {
+  const childrenArray = React.Children.toArray(children);
+  return childrenArray.reduce((flatChildren: ReactChildArray, child) => {
+    if ((child as React.ReactElement<any>).type === React.Fragment) {
+      return flatChildren.concat(
+        flattenChildren((child as React.ReactElement<any>).props.children)
+      );
+    }
+    flatChildren.push(child);
+    return flatChildren;
+  }, []);
+}
+
+export const isWalletConnectConnector = (connectorId?: string) =>
+  connectorId === 'walletConnect';
+
+export const isAaveAccountConnector = (connectorId?: string) =>
+  connectorId === 'aaveAccountProvider';
+
+export const isMetaMaskConnector = (connectorId?: string) =>
+  connectorId === 'metaMaskSDK';
+
+export const isCoinbaseWalletConnector = (connectorId?: string) =>
+  connectorId === 'coinbaseWalletSDK';
+
+export const isLedgerConnector = (connectorId?: string) =>
+  connectorId === 'ledger';
+
+export const isPortoConnector = (connectorId?: string) =>
+  connectorId === 'xyz.ithaca.porto';
+
+export const isSafeConnector = (connectorId?: string) => connectorId === 'safe';
+
+export const isInjectedConnector = (connectorId?: string) =>
+  connectorId === 'injected';
+
+// siww multi-chain seam: every wallet entry carries an `ecosystem`. EVM wallets
+// (the wagmi/EIP-6963/Coinbase/WalletConnect connectors) default to 'evm'; the
+// siww shim-connectors (Solana/Sui/Bitcoin) tag themselves so the modal can route
+// them down the injected path and skip EVM-only assumptions.
+export type Ecosystem = 'evm' | 'solana' | 'sui' | 'bitcoin';
+
+// Params are `unknown` because wagmi's Connector / CreateConnectorFn types are
+// opaque and `ecosystem` is our own added field — narrow internally.
+export const getConnectorEcosystem = (connector?: unknown): Ecosystem =>
+  (connector as { ecosystem?: Ecosystem } | null | undefined)?.ecosystem ??
+  'evm';
+
+export const isSiwwConnector = (connectorOrId?: unknown): boolean => {
+  if (!connectorOrId) return false;
+  if (typeof connectorOrId === 'string')
+    return connectorOrId.startsWith('siww:');
+  const c = connectorOrId as { type?: string; id?: string };
+  return c.type === 'siww' || (c.id?.startsWith('siww:') ?? false);
+};
+
+export {
+  nFormatter,
+  truncateEthAddress,
+  truncateENSAddress,
+  isMobile,
+  isAndroid,
+  detectBrowser,
+  detectOS,
+  flattenChildren,
+};