getAlby · rolznz · Aug 25, 2023 · Aug 22, 2023 · Aug 22, 2023 · Aug 23, 2023
diff --git a/.github/workflows/website.yml b/.github/workflows/website.yml
@@ -4,7 +4,7 @@ name: Deploy static content to Pages
 on:
   # Runs on pushes targeting the default branch
   push:
-    branches: ['feat/website', 'master']
+    branches: ['feat/website', 'master', 'feat/new-design']
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:

diff --git a/README.md b/README.md
@@ -52,7 +52,19 @@ Current wallets supported:
 
 ### Styling
 
-- the following attributes can be configured as hex or rgb: `color-gradient1`, `color-gradient2`, `color-primary`, `color-secondary`
+- the following css variables can be configured as hex or rgb:
+
+```css
+html {
+  --lwc-color-primary: #21ecc7;
+  --lwc-color-secondary: #21ecc7;
+  --lwc-color-bg-primary: black;
+  --lwc-color-bg-secondary: black;
+  --lwc-color-text-primary: black;
+  --lwc-color-text-secondary: #f4f4f4;
+  --lwc-color-text-tertiary: white;
+}
+```
 
 ### Pure HTML
 
@@ -149,6 +161,7 @@ We are happy to help, please contact us or create an issue.
 - Read the [Alby developer guide](https://guides.getalby.com/overall-guide/alby-for-developers/getting-started) to better understand how Alby packages and APIs can be used to power your app.
 
 ## FAQ
+
 - Does this work on mobile browsers and mobile PWAs, or desktop browsers without a WebLN extension?
 
 Yes! that's the main benefit.
@@ -178,8 +191,6 @@ You should have a certain level of trust on the website you decide to connect yo
 1. add the "Connect Wallet" button
 2. wait for a connection event (using window.addEventListener) and then request to pay the invoice with window.webln
 
-
-
 # 🔥 Lit
 
 This project is powered by Lit.

diff --git a/dev/vite/index.html b/dev/vite/index.html
@@ -26,21 +26,73 @@
       body {
         font-family: Arial, Helvetica, sans-serif;
       }
+      .theme-default-dark {
+        --lwc-color-bg-primary: #222;
+        --lwc-color-bg-secondary: #000;
+        --lwc-color-text-secondary: #808080;
+      }
+      .theme-geyser-light {
+        --lwc-color-primary: #10caa8;
+        --lwc-color-secondary: #10caa8;
+        --lwc-color-tertiary: #21ecc7;
+        --lwc-color-bg-primary: white;
+        --lwc-color-bg-secondary: black;
+        --lwc-color-text-primary: black;
+        --lwc-color-text-secondary: #1a202c;
+        --lwc-color-text-tertiary: white;
+      }
+      .theme-geyser-dark {
+        --lwc-color-primary: #21ecc7;
+        --lwc-color-secondary: #21ecc7;
+        --lwc-color-bg-primary: black;
+        --lwc-color-bg-secondary: black;
+        --lwc-color-text-primary: black;
+        --lwc-color-text-secondary: #f4f4f4;
+        --lwc-color-text-tertiary: white;
+      }
+      .theme-orange-dark {
+        --lwc-color-primary: #ffc837;
+        --lwc-color-secondary: #ff8008;
+        --lwc-color-bg-primary: black;
+        --lwc-color-bg-secondary: black;
+        --lwc-color-text-primary: black;
+        --lwc-color-text-secondary: #ca9;
+      }
     </style>
   </head>
   <body>
     <h1>Components</h1>
-    <h2>Buttons</h2>
+    <h2>Button</h2>
+    <h3>Light</h3>
     <lwc-button></lwc-button><br /><br />
-    <lwc-button
-      color-gradient1="#FFC837"
-      color-gradient2="#FF8008"
-      color-primary="black"
-      color-secondary="yellow"
-    ></lwc-button>
+    <div class="theme-geyser-light">
+      <lwc-button></lwc-button>
+    </div>
     <br /><br />
+    <h3>Dark</h3>
+    <div style="background-color: #111; padding: 8px">
+      <div class="theme-default-dark">
+        <lwc-button></lwc-button>
+      </div>
+      <br /><br />
+
+      <div class="theme-geyser-dark">
+        <lwc-button></lwc-button>
+      </div>
+      <br /><br />
+
+      <div class="theme-orange-dark">
+        <lwc-button></lwc-button>
+      </div>
+    </div>
+    <h3>Icon only</h3>
     <lwc-button icon-only></lwc-button>
 
+    <h2>Modal Content</h2>
+    <div style="width: 448px">
+      <lwc-modal-content></lwc-modal-content>
+    </div>
+
     <h2>Connector List</h2>
     <lwc-connector-list></lwc-connector-list>
   </body>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@getalby/lightning-wallet-connect",
-  "version": "1.0.6",
+  "version": "1.0.13",
   "description": "Web components to connect to a lightning wallet and power a website with WebLN",
   "type": "module",
   "source": "src/index.ts",
@@ -59,7 +59,7 @@
     "@web/dev-server-esbuild": "^0.4.1",
     "@web/test-runner": "^0.15.0",
     "@web/test-runner-playwright": "^0.9.0",
-    "@webbtc/webln-types": "^1.0.12",
+    "@webbtc/webln-types": "^2.0.0",
     "@webcomponents/webcomponentsjs": "^2.6.0",
     "concurrently": "^8.2.0",
     "esbuild": "^0.18.17",

diff --git a/src/components/connectors/lwc-alby-nwc-connector.ts b/src/components/connectors/lwc-alby-nwc-connector.ts
@@ -2,7 +2,6 @@ import {customElement} from 'lit/decorators.js';
 import {LwcConnector} from './lwc-connector';
 import {albyIcon} from '../icons/albyIcon';
 import {webln} from '@getalby/sdk';
-import store from '../../state/store';
 
 @customElement('lwc-alby-nwc-connector')
 export class LwcAlbyNWCConnector extends LwcConnector {
@@ -23,9 +22,7 @@ export class LwcAlbyNWCConnector extends LwcConnector {
       name: 'Lightning Wallet Connect',
     });
 
-    store.getState().connect({
-      connectorName: this._title,
-      connectorType: this._connectorType,
+    this._connect({
       nwcUrl: nwc.getNostrWalletConnectUrl(true),
     });
   }

diff --git a/src/components/connectors/lwc-connector.ts b/src/components/connectors/lwc-connector.ts
@@ -2,8 +2,11 @@ import {TemplateResult, html} from 'lit';
 import {LwcElement} from '../lwc-element';
 import {withTwind} from '../twind/withTwind';
 import {ConnectorType} from '../../types/ConnectorType';
+import {color} from '../css/colors';
+import {ConnectorConfig} from '../../types/ConnectorConfig';
+import store from '../../state/store';
 
-export abstract class LwcConnector extends withTwind(LwcElement) {
+export abstract class LwcConnector extends withTwind()(LwcElement) {
   private _background: string;
   private _icon: TemplateResult<2>;
   protected _title: string;
@@ -33,7 +36,21 @@ export abstract class LwcConnector extends withTwind(LwcElement) {
       >
         ${this._icon}
       </div>
-      <span class="text-sm font-sans font-medium">${this._title}</span>
+      <span
+        class="text-sm font-sans font-medium"
+        style="color: ${color('text-secondary')}"
+        >${this._title}</span
+      >
     </div>`;
   }
+
+  protected _connect(
+    config: Omit<ConnectorConfig, 'connectorName' | 'connectorType'>
+  ) {
+    store.getState().connect({
+      ...config,
+      connectorName: this._title,
+      connectorType: this._connectorType,
+    });
+  }
 }
diff --git a/src/components/connectors/lwc-extension-connector.ts b/src/components/connectors/lwc-extension-connector.ts
@@ -1,7 +1,6 @@
 import {customElement} from 'lit/decorators.js';
 import {LwcConnector} from './lwc-connector';
 import {puzzleIcon} from '../icons/puzzleIcon';
-import store from '../../state/store';
 
 @customElement('lwc-extension-connector')
 export class LwcExtensionConnector extends LwcConnector {
@@ -15,10 +14,7 @@ export class LwcExtensionConnector extends LwcConnector {
   }
 
   protected _onClick() {
-    store.getState().connect({
-      connectorName: this._title,
-      connectorType: this._connectorType,
-    });
+    this._connect({});
   }
 }
 

diff --git a/src/components/connectors/lwc-nwc-connector.ts b/src/components/connectors/lwc-nwc-connector.ts
@@ -1,7 +1,6 @@
 import {customElement} from 'lit/decorators.js';
 import {LwcConnector} from './lwc-connector';
 import {nwcIcon} from '../icons/nwcIcon';
-import store from '../../state/store';
 
 @customElement('lwc-nwc-connector')
 export class LwcGenericNWCConnector extends LwcConnector {
@@ -16,9 +15,7 @@ export class LwcGenericNWCConnector extends LwcConnector {
       return;
     }
 
-    store.getState().connect({
-      connectorName: this._title,
-      connectorType: this._connectorType,
+    this._connect({
       nwcUrl: nostrWalletConnectUrl,
     });
   }

diff --git a/src/components/css/colors.ts b/src/components/css/colors.ts
@@ -0,0 +1,16 @@
+const prefix = 'lwc-color-';
+
+const colors = {
+  primary: '#2EA7FF',
+  secondary: '#0045B1',
+  tertiary: undefined,
+  'bg-primary': '#FFFFFF',
+  'bg-secondary': '#000000',
+  'text-primary': '#FFFFFF',
+  'text-secondary': '#404040',
+  'text-tertiary': '#FFFFFF',
+};
+
+export function color(key: keyof typeof colors, fallback = colors[key]) {
+  return `var(--${prefix}${key}, ${fallback})`;
+}
diff --git a/src/components/css/gradientText.ts b/src/components/css/gradientText.ts
@@ -0,0 +1,9 @@
+import {color} from './colors';
+
+export function gradientText() {
+  return `background: -webkit-linear-gradient(${color('primary')}, ${color(
+    'secondary'
+  )});
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;`;
+}