Adding custom injected css

README.md

@@ -40,6 +40,7 @@ interface CreateConfigOptions {
   disableAnalytics?: boolean
   defaultTheme?: Theme
   position?: ModalPosition
+  customCSS?: string // Injected into shadow dom
   signIn?: {
     logoUrl?: string
     projectName?: string

examples/react/src/config.ts

@@ -29,6 +29,12 @@ export const connectConfig: ConnectConfig = {
     projectName: 'Sequence Web SDK Demo',
     useMock: isDebugMode
   },
+  // Custom css injected into shadow dom
+  // customCSS: `
+  //   span {
+  //     color: red !important;
+  //   }
+  // `,
   displayedAssets: [
     // Native token
     {

packages/checkout/src/components/SequenceCheckoutProvider/SequenceCheckoutProvider.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { getModalPositionCss, ShadowRoot, useTheme } from '@0xsequence/connect'
+import { getModalPositionCss, ShadowRoot, useConnectConfigContext, useTheme } from '@0xsequence/connect'
 import { Modal } from '@0xsequence/design-system'
 import { AnimatePresence } from 'motion/react'
 import React, { useState, useEffect } from 'react'
@@ -61,6 +61,7 @@ export const SequenceCheckoutProvider = ({ children, config }: SequenceCheckoutP
   const [transactionStatusSettings, setTransactionStatusSettings] = useState<TransactionStatusSettings>()
   const [swapModalSettings, setSwapModalSettings] = useState<SwapModalSettings>()
   const [history, setHistory] = useState<History>([])
+  const { customCSS } = useConnectConfigContext()
 
   const getDefaultLocation = (): Navigation => {
     // skip the order summary for credit card checkout if no items provided
@@ -253,7 +254,7 @@ export const SequenceCheckoutProvider = ({ children, config }: SequenceCheckoutP
                   }}
                 >
                   <NavigationContextProvider value={{ history, setHistory, defaultLocation: getDefaultLocation() }}>
-                    <ShadowRoot theme={theme}>
+                    <ShadowRoot theme={theme} customCSS={customCSS}>
                       <AnimatePresence>
                         {openCheckoutModal && (
                           <Modal

packages/connect/README.md

@@ -41,6 +41,7 @@ interface CreateConfigOptions {
   disableAnalytics?: boolean
   defaultTheme?: Theme
   position?: ModalPosition
+  customCSS?: string // Injected into shadow dom
   signIn?: {
     logoUrl?: string
     projectName?: string

packages/connect/src/components/SequenceConnectProvider/SequenceConnectProvider.tsx

@@ -48,7 +48,8 @@ export const SequenceConnectProvider = (props: SequenceConnectProviderProps) =>
     disableAnalytics = false,
     hideExternalConnectOptions = false,
     hideConnectedWallets = false,
-    hideSocialConnectOptions = false
+    hideSocialConnectOptions = false,
+    customCSS
   } = config
 
   const defaultAppName = signIn.projectName || 'app'
@@ -182,7 +183,7 @@ export const SequenceConnectProvider = (props: SequenceConnectProviderProps) =>
                 }}
               >
                 <AnalyticsContextProvider value={{ setAnalytics, analytics }}>
-                  <ShadowRoot theme={theme}>
+                  <ShadowRoot theme={theme} customCSS={customCSS}>
                     <AnimatePresence>
                       {openConnectModal && (
                         <Modal

packages/connect/src/components/ShadowRoot/ShadowRoot.tsx

@@ -8,10 +8,10 @@ import { styles } from '../../styles'
 
 // Create a stylesheet which is shared by all ShadowRoot components
 let sheet: CSSStyleSheet
-const getCSSStyleSheet = () => {
+const getCSSStyleSheet = (customCSS?: string) => {
   if (!sheet) {
     sheet = new CSSStyleSheet()
-    sheet.replaceSync(styles)
+    sheet.replaceSync(styles + (customCSS ? `\n\n${customCSS}` : ''))
   }
 
   return sheet
@@ -20,10 +20,11 @@ const getCSSStyleSheet = () => {
 interface ShadowRootProps {
   theme?: Theme
   children: ReactNode
+  customCSS?: string
 }
 
 export const ShadowRoot = (props: ShadowRootProps) => {
-  const { theme, children } = props
+  const { theme, children, customCSS } = props
   const hostRef = useRef<HTMLDivElement>(null)
   const [container, setContainer] = useState<HTMLDivElement | null>(null)
   const [windowDocument, setWindowDocument] = useState<Document | null>(null)
@@ -38,7 +39,7 @@ export const ShadowRoot = (props: ShadowRootProps) => {
       const shadowRoot = hostRef.current.attachShadow({ mode: 'open' })
 
       // Attach the stylesheet
-      shadowRoot.adoptedStyleSheets = [getCSSStyleSheet()]
+      shadowRoot.adoptedStyleSheets = [getCSSStyleSheet(customCSS)]
 
       // Create a container
       const container = document.createElement('div')

packages/connect/src/styles.ts

@@ -304,9 +304,6 @@ export const styles = String.raw`
   .my-4 {
     margin-block: calc(var(--spacing) * 4);
   }
-  .mt-0 {
-    margin-top: calc(var(--spacing) * 0);
-  }
   .mt-0\.5 {
     margin-top: calc(var(--spacing) * 0.5);
   }
@@ -382,9 +379,6 @@ export const styles = String.raw`
   .inline-flex {
     display: inline-flex;
   }
-  .table {
-    display: table;
-  }
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
@@ -475,9 +469,6 @@ export const styles = String.raw`
   .min-h-full {
     min-height: 100%;
   }
-  .w-1 {
-    width: calc(var(--spacing) * 1);
-  }
   .w-1\/2 {
     width: calc(1/2 * 100%);
   }
@@ -571,21 +562,12 @@ export const styles = String.raw`
   .min-w-full {
     min-width: 100%;
   }
-  .flex-shrink {
-    flex-shrink: 1;
-  }
   .shrink-0 {
     flex-shrink: 0;
   }
-  .flex-grow {
-    flex-grow: 1;
-  }
   .grow {
     flex-grow: 1;
   }
-  .border-collapse {
-    border-collapse: collapse;
-  }
   .origin-top {
     transform-origin: top;
   }
@@ -957,9 +939,6 @@ export const styles = String.raw`
   .pt-0 {
     padding-top: calc(var(--spacing) * 0);
   }
-  .pt-1 {
-    padding-top: calc(var(--spacing) * 1);
-  }
   .pt-1\.5 {
     padding-top: calc(var(--spacing) * 1.5);
   }
@@ -1249,9 +1228,6 @@ export const styles = String.raw`
   .ring-border-normal {
     --tw-ring-color: var(--seq-color-border-normal);
   }
-  .ring-white {
-    --tw-ring-color: var(--color-white);
-  }
   .ring-white\/10 {
     --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1290,10 +1266,6 @@ export const styles = String.raw`
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
     backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
   }
-  .backdrop-filter {
-    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-  }
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));

packages/connect/src/types.ts

@@ -82,6 +82,7 @@ export interface ConnectConfig {
   hideExternalConnectOptions?: boolean
   hideSocialConnectOptions?: boolean
   hideConnectedWallets?: boolean
+  customCSS?: string
 }
 
 export type StorageItem = {

packages/wallet-widget/src/components/SequenceWalletProvider/SequenceWalletProvider.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { SequenceCheckoutProvider, useAddFundsModal } from '@0xsequence/checkout'
-import { getModalPositionCss, useTheme, ShadowRoot, useOpenConnectModal } from '@0xsequence/connect'
+import { getModalPositionCss, useTheme, ShadowRoot, useOpenConnectModal, useConnectConfigContext } from '@0xsequence/connect'
 import { Modal, Scroll, ToastProvider } from '@0xsequence/design-system'
 import { AnimatePresence } from 'motion/react'
 import React, { useState, useContext, useEffect } from 'react'
@@ -39,6 +39,7 @@ export const WalletContent = ({ children }: SequenceWalletProviderProps) => {
   const { isAddFundsModalOpen } = useAddFundsModal()
   const { isConnectModalOpen } = useOpenConnectModal()
   const { address } = useAccount()
+  const { customCSS } = useConnectConfigContext()
 
   useEffect(() => {
     if (!address) {
@@ -94,7 +95,7 @@ export const WalletContent = ({ children }: SequenceWalletProviderProps) => {
         <FiatWalletsMapProvider>
           <ToastProvider>
             <SwapProvider>
-              <ShadowRoot theme={theme}>
+              <ShadowRoot theme={theme} customCSS={customCSS}>
                 <AnimatePresence>
                   {openWalletModal && !isAddFundsModalOpen && !isConnectModalOpen && (
                     <Modal