Selector modal: customization options

sdk/apps/modal-example/src/routes/aleph.tsx

@@ -25,7 +25,33 @@ export default function Polkadot() {
         network: 'AlephZero'
       },
       true, // change this to false to test disabling eager connect
-      document.getElementById('modalAnchor')
+      document.getElementById('modalAnchor'),
+      {
+        variablesOverride: {
+          '--nc-color-primary': 'green',
+          '--nc-img-logo': 'url(https://alephzero.org/aleph-design/brand-elements/logo-day.svg)'
+        },
+        stylesOverride: `
+        .nc_headerWrapper {
+          background-color: red;
+        }
+
+        .nc_headerLogo {
+          width: 200px;
+        }
+
+        .nc_modalContent {
+          border-radius: 0;
+          background-color: var(--nc-color-elements-8);
+          border: 3px solid var(--nc-color-primary);
+        }
+        `,
+        qrConfigOverride: {
+          dotsOptions: {
+            color: 'gold'
+          }
+        }
+      }
     )
 
     adapter.canEagerConnect().then((canEagerConnect) => {

sdk/packages/modal/.storybook/preview-head.html

@@ -1,13 +1,6 @@
 <style>
   @import url('https://fonts.googleapis.com/css2?family=Prompt:wght@400;600&display=swap');
 
-  /* Firefox */
-  * {
-    font-family: 'Prompt';
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    font-smooth: never;
-  }
   body {
     background-color: black;
   }

sdk/packages/modal/package.json

@@ -23,7 +23,6 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@lit-labs/motion": "^1.0.3",
     "@nightlylabs/qr-code": "2.0.3",
     "autoprefixer": "^10.4.14",
     "lit": "^2.7.2",

sdk/packages/modal/rollup.config.js

@@ -44,7 +44,6 @@ export default [
       'postcss',
       'postcss-lit',
       'tailwindcss',
-      '@lit-labs/motion',
       'lit/directives/style-map.js',
       'lit/directives/unsafe-html.js',
       'lit/decorators.js'