feat: improve color styling options

getAlby · Aug 23, 2023 · 87adc2e · 87adc2e
1 parent d00e5f7
commit 87adc2e
Show file tree

Hide file tree

Showing 14 changed files with 179 additions and 109 deletions.
diff --git a/README.md b/README.md
@@ -52,15 +52,17 @@ Current wallets supported:
 
 ### Styling
 
-- the following css variables can be configured as hex or rgb: `lwc-color-gradient1`, `lwc-color-gradient2`, `lwc-color-primary`, `lwc-color-secondary`, `lwc-color-tertiary`
+- the following css variables can be configured as hex or rgb:
 
 ```css
 html {
-  --lwc-color-gradient-1: #ffc837;
-  --lwc-color-gradient-2: #ff8008;
-  --lwc-color-primary: black;
-  --lwc-color-secondary: yellow;
-  --lwc-color-tertiary: green;
+  --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;
 }
 ```
 
@@ -159,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.
@@ -188,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,23 +26,52 @@
       body {
         font-family: Arial, Helvetica, sans-serif;
       }
-      .styled {
-        --lwc-color-gradient-1: #ffc837;
-        --lwc-color-gradient-2: #ff8008;
-        --lwc-color-primary: black;
-        --lwc-color-secondary: #ccc;
-        --lwc-color-tertiary: #ca9;
+      .theme-default-dark {
+        --lwc-color-bg-primary: #222;
+        --lwc-color-bg-secondary: #000;
+        --lwc-color-text-secondary: #808080;
+      }
+      .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 />
-    <div class="styled">
-      <lwc-button></lwc-button>
+    <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>
-    <br /><br />
+    <h3>Icon only</h3>
     <lwc-button icon-only></lwc-button>
 
     <h2>Connector List</h2>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@getalby/lightning-wallet-connect",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "Web components to connect to a lightning wallet and power a website with WebLN",
   "type": "module",
   "source": "src/index.ts",

diff --git a/src/components/icons/bcLogo.ts b/src/components/icons/bcLogo.ts
diff --git a/src/components/icons/crossIcon.ts b/src/components/icons/crossIcon.ts
@@ -3,10 +3,10 @@ import {color} from '../utils/colors';
 
 export const crossIcon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M6 6L18 18" stroke=${color(
-  'tertiary'
+  'text-secondary'
 )} stroke-width="1.5" stroke-linecap="round"/>
 <path d="M18 6L6.00001 18" stroke=${color(
-  'tertiary'
+  'text-secondary'
 )} stroke-width="1.5" stroke-linecap="round"/>
 </svg>
 `;
diff --git a/src/components/icons/exitIcon.ts b/src/components/icons/exitIcon.ts
@@ -6,8 +6,8 @@ export const exitIcon = svg`
 <path d="M14 7.99999L6.5 7.99999M14 7.99999L11 11M14 7.99999L11 5M8 13.5H3.66667C3.29848 13.5 3 13.2015 3 12.8333L3 3.16667C3 2.79848 3.29848 2.5 3.66667 2.5L8 2.5" stroke="url(#paint0_linear_204_1760)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <defs>
 <linearGradient id="paint0_linear_204_1760" x1="8.5" y1="2.5" x2="8.5" y2="13.5" gradientUnits="userSpaceOnUse">
-<stop stop-color=${color('gradient-1')}/>
-<stop offset="1" stop-color=${color('gradient-2')}/>
+<stop stop-color=${color('primary')}/>
+<stop offset="1" stop-color=${color('secondary')}/>
 </linearGradient>
 </defs>
 </svg>

diff --git a/src/components/icons/loadingIcon.ts b/src/components/icons/loadingIcon.ts
@@ -1,14 +1,19 @@
 import {svg} from 'lit';
+import {color} from '../utils/colors';
 
 export const loadingIcon = svg`
-<svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+<svg class="animate-spin h-5 w-5 ${color(
+  'text-primary'
+)}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
       <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
       <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
     </svg>
 `;
 
 export const loadingIcon2 = svg`
-<svg class="animate-spin h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+<svg class="animate-spin h-5 w-5 ${color(
+  'primary'
+)}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
       <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
       <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
     </svg>

diff --git a/src/components/lwc-button.ts b/src/components/lwc-button.ts
@@ -57,8 +57,8 @@ export class LwcButton extends withTwind(LwcElement) {
           : ''}"
         style="${this._connected && !iconOnly
           ? `background: linear-gradient(180deg, #fff6 0%, #fff0 100%), linear-gradient(180deg, ${color(
-              'secondary'
-            )}, ${color('secondary')} 100%)`
+              'bg-secondary'
+            )}, ${color('bg-secondary')} 100%)`
           : ''}"
         @click=${this._onClick}
       >
@@ -74,15 +74,15 @@ export class LwcButton extends withTwind(LwcElement) {
           relative font-medium font-sans shadow rounded-lg flex gap-2 justify-center items-center
           ${this.disabled ? 'bg-gray-300 opacity-50' : ''}"
           style="${!this.disabled &&
-          `background: linear-gradient(180deg, ${color(
-            'gradient-1'
-          )} 0%, ${color('gradient-2')} 100%); color: ${color('primary')};
+          `background: linear-gradient(180deg, ${color('primary')} 0%, ${color(
+            'secondary'
+          )} 100%); color: ${color('text-primary')};
           `}"
           ?disabled=${this.disabled}
         >
           <div
             class="absolute top-0 left-0 w-full h-full rounded-lg border-2 opacity-10"
-            style="border-color: ${color('primary')}"
+            style="border-color: ${color('bg-primary')}"
           ></div>
           ${isLoading
             ? loadingIcon
@@ -91,18 +91,20 @@ export class LwcButton extends withTwind(LwcElement) {
               ? lwcConnectedIcon
               : null
             : lwcIcon}
-          ${iconOnly
-            ? null
-            : isLoading
-            ? html`Connecting...`
-            : this._connected
-            ? html`${this._alias || 'Connected'}`
-            : html`Connect Wallet`}
+          <span class="font-semibold">
+            ${iconOnly
+              ? null
+              : isLoading
+              ? html`Connecting...`
+              : this._connected
+              ? html`${this._alias || 'Connected'}`
+              : html`Connect Wallet`}
+          </span>
         </button>
         ${this._connected && !iconOnly && this._balance !== undefined
           ? html`<span
               class="font-medium font-sans mr-2 flex justify-center items-center gap-0.5"
-              style="color: ${color('primary')}"
+              style="color: ${color('text-tertiary')}"
               >${satIcon}<span class="font-mono">${this._balance}</span></span
             >`
           : html``}

diff --git a/src/components/lwc-modal.ts b/src/components/lwc-modal.ts
@@ -80,12 +80,12 @@ export class LwcModal extends withTwindExtended({
         class="absolute top-0 left-0 w-full h-full ${this._closing
           ? 'animate-lighten'
           : 'animate-darken'}"
-        style="background: ${color('secondary')}"
+        style="background: ${color('bg-secondary')}"
       ></div>
       <div
         class="transition-all p-4 pt-6 pb-8 rounded-3xl shadow-2xl flex flex-col justify-center items-center w-full max-w-md max-sm:rounded-b-none
         ${this._closing ? 'animate-fade-out' : 'animate-fade-in'}"
-        style="background: ${color('primary')}"
+        style="background: ${color('bg-primary')}"
       >
         <div class="flex justify-center items-center gap-2 w-full relative">
           <div class="absolute right-0 h-full flex items-center justify-center">
@@ -99,15 +99,15 @@ export class LwcModal extends withTwindExtended({
           ? html`<div class="py-32">${loadingIcon2}</div>`
           : this._connected
           ? html` <h1 class="font-sans text-lg my-8" style="color: ${color(
-              'tertiary'
+              'text-secondary'
             )}">
                 Hello,
                 <span
                   class="font-bold"
                   style="
-              background: -webkit-linear-gradient(${color(
-                'gradient-1'
-              )}, ${color('gradient-2')});
+              background: -webkit-linear-gradient(${color('primary')}, ${color(
+              'secondary'
+            )});
               -webkit-background-clip: text;
               -webkit-text-fill-color: transparent;
               "
@@ -117,18 +117,18 @@ export class LwcModal extends withTwindExtended({
               </h1>
 
               <span class="font-sans text-xs mb-2" style="color: ${color(
-                'tertiary'
+                'text-secondary'
               )}">Balance</span>
 
               <h2 class="font-sans text-2xl mb-12" style="color: ${color(
-                'tertiary'
+                'text-secondary'
               )}">
                 <span
                   class="font-bold font-mono text-4xl align-bottom"
                   style="
-              background: -webkit-linear-gradient(${color(
-                'gradient-1'
-              )}, ${color('gradient-2')});
+              background: -webkit-linear-gradient(${color('primary')}, ${color(
+              'secondary'
+            )});
               -webkit-background-clip: text;
               -webkit-text-fill-color: transparent;
               "
@@ -138,7 +138,7 @@ export class LwcModal extends withTwindExtended({
               <hr class="border border-neutral-200 w-full mb-4"></div>
 
               <span class="font-sans text-xs mb-4" style="color: ${color(
-                'tertiary'
+                'text-secondary'
               )}">Connected through ${this._connectorName}</span>
 
               <button
@@ -149,24 +149,29 @@ export class LwcModal extends withTwindExtended({
                   class="absolute -z-10 top-0 left-0 w-full h-full border-2 border-solid border-transparent rounded-lg"
                   style="
                   background-image: linear-gradient(${color(
-                    'primary'
-                  )}, ${color('primary')}), linear-gradient(to bottom, ${color(
-              'gradient-1'
-            )}, ${color('gradient-2')});
+                    'bg-primary'
+                  )}, ${color(
+              'bg-primary'
+            )}), linear-gradient(to bottom, ${color('primary')}, ${color(
+              'secondary'
+            )});
                   background-origin: border-box;
                   background-clip: content-box, border-box;"
                 ></div>
                 ${exitIcon}
                 <span style="
                 background: -webkit-linear-gradient(${color(
-                  'gradient-1'
-                )}, ${color('gradient-2')});
+                  'primary'
+                )}, ${color('secondary')});
                 -webkit-background-clip: text;
                 -webkit-text-fill-color: transparent;
               ">Disconnect</span>
               </button>`
           : html`
-              <h1 class="font-sans my-8" style="color: ${color('tertiary')}">
+              <h1
+                class="font-sans my-8"
+                style="color: ${color('text-secondary')}"
+              >
                 How would you like to connect?
               </h1>
 

diff --git a/src/components/utils/colors.ts b/src/components/utils/colors.ts
@@ -1,11 +1,13 @@
 const prefix = 'lwc-color-';
 
 const colors = {
-  'gradient-1': '#2EA7FF',
-  'gradient-2': '#0045B1',
-  primary: '#FFFFFF',
-  secondary: '#000000',
-  tertiary: '#404040',
+  primary: '#2EA7FF',
+  secondary: '#0045B1',
+  'bg-primary': '#FFFFFF',
+  'bg-secondary': '#000000',
+  'text-primary': '#FFFFFF',
+  'text-secondary': '#404040',
+  'text-tertiary': '#FFFFFF',
 };
 
 export function color(key: keyof typeof colors) {

diff --git a/website/package.json b/website/package.json
@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@getalby/lightning-wallet-connect": "^1.0.7",
+    "@getalby/lightning-wallet-connect": "^1.0.8",
     "@heroicons/react": "^2.0.18",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/website/src/App.tsx b/website/src/App.tsx
@@ -124,7 +124,7 @@ function App() {
             <lwc-button />
           </div>
           <div className="flex gap-4 justify-center item theme p-2 rounded-lg shadow-xl bg-black bg-opacity-30">
-            {[0, 1].map((index) => (
+            {[...new Array(4)].map((_, index) => (
               <div className={`theme-${index}`} key={index}>
                 <div
                   onClick={() => setThemeIndex(index)}
@@ -133,7 +133,7 @@ function App() {
                   }`}
                   style={{
                     background:
-                      'linear-gradient(180deg, var(--lwc-color-gradient-1) 0%, var(--lwc-color-gradient-2) 100%)',
+                      'linear-gradient(180deg, var(--lwc-color-primary) 0%, var(--lwc-color-secondary) 100%)',
                   }}
                 />
               </div>