feat: add custom connect button theme

radixdlt · Dec 5, 2024 · 38b990e · 38b990e
1 parent 510127a
commit 38b990e
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 7 deletions.
diff --git a/packages/common/src/index.ts b/packages/common/src/index.ts
@@ -14,6 +14,7 @@ export const RadixButtonTheme = {
   black: 'black',
   'white-with-outline': 'white-with-outline',
   white: 'white',
+  custom: 'custom',
 } as const
 
 export type RadixButtonTheme = keyof typeof RadixButtonTheme

diff --git a/packages/connect-button/src/components/button/button.stories.css b/packages/connect-button/src/components/button/button.stories.css
@@ -6,6 +6,13 @@
   background: #7a7676;
 }
 
+.column.custom {
+  --radix-connect-button-background: red;
+  --radix-connect-button-text-color: black;
+  --radix-connect-button-border-color: yellow;
+  --radix-connect-button-background-hover: green;
+}
+
 .row {
   margin: 1rem;
   white-space: nowrap;
@@ -14,4 +21,4 @@
 
 radix-button {
   margin-right: 0.3rem;
-}
+}
diff --git a/packages/connect-button/src/components/button/button.stories.ts b/packages/connect-button/src/components/button/button.stories.ts
@@ -133,6 +133,9 @@ export const Themes: Story = {
             connected: false,
           })}
         </div>
+        <div class="column custom">
+          ${createRow({ ...args, theme: 'custom', connected: false })}
+        </div>
         <div class="column dark">
           ${createRow({ ...args, theme: 'white', connected: false })}
         </div>

diff --git a/packages/connect-button/src/components/button/button.ts b/packages/connect-button/src/components/button/button.ts
@@ -122,7 +122,6 @@ export class RadixButton extends LitElement {
         justify-content: flex-end;
         container-type: inline-size;
         user-select: none;
-        --radix-connect-button-text-color: var(--color-light);
       }
 
       :host([full-width]) > button {

diff --git a/packages/dapp-toolkit/README.md b/packages/dapp-toolkit/README.md
@@ -540,12 +540,21 @@ Play around with the different configurations using the [√ Connect Button stor
 <img src="docs/themes.jpeg" alt="Connect Button Themes"> 
 </div>
 
-There are four themes you can choose from by default: `radix-blue` (default), `black`, `white-with-outline`, `white`. In order to do that, call following function after RDT instantiation
+There are four themes you can choose from by default: `radix-blue` (default), `black`, `white-with-outline`, `white` and a special one called `custom`. In order to do that, call following function after RDT instantiation
 
 ```typescript
 rdt.buttonApi.setTheme('black')
 ```
 
+Using `custom` theme will let you override additional CSS variables. With that you can completely change the UI for not connected connect button.
+
+```css
+body {
+  --radix-connect-button-background: red;
+  --radix-connect-button-text-color: black;
+  --radix-connect-button-border-color: yellow;
+  --radix-connect-button-background-hover: green;
+}
 ### Modes
 
 <div align="center">

diff --git a/packages/dapp-toolkit/src/modules/connect-button/subjects.ts b/packages/dapp-toolkit/src/modules/connect-button/subjects.ts
@@ -1,4 +1,4 @@
-import type { Account, RequestItem } from 'radix-connect-common'
+import type { Account, RadixButtonTheme, RequestItem } from 'radix-connect-common'
 import { BehaviorSubject, ReplaySubject, Subject } from 'rxjs'
 import { isMobile } from '../../helpers'
 import { ConnectButtonStatus } from './types'
@@ -23,9 +23,7 @@ export const ConnectButtonSubjects = () => ({
   fullWidth: new BehaviorSubject<boolean>(false),
   activeTab: new BehaviorSubject<'sharing' | 'requests'>('sharing'),
   mode: new BehaviorSubject<'light' | 'dark'>('light'),
-  theme: new BehaviorSubject<
-    'radix-blue' | 'black' | 'white' | 'white-with-outline'
-  >('radix-blue'),
+  theme: new BehaviorSubject<RadixButtonTheme>('radix-blue'),
   avatarUrl: new BehaviorSubject<string>(''),
   personaLabel: new BehaviorSubject<string>(''),
   personaData: new BehaviorSubject<{ value: string; field: string }[]>([]),