Skip to content

Commit

Permalink
Feature: Add Theming Options (blocknative#1447)
Browse files Browse the repository at this point in the history 
* Added theming updates to cover not dark mode mode

* Refine theme types, add actions to set themes through API, add validation

* updated layout further

* Remove docs files not needed

* Merge in develop

* Cleanup and fixes

* Notify matching theme

* Light mode looking good on notify

* Further refined tooling and themes

* TP now works with themes, updated default behavior

* Update handling of theme types

* restore changes to indicator

* Update Icon usage

* update blocknative-icon svg

* re-org and rename icon imports

* remove hover states from mobile

* Update packages to reflect fillColor icon use of css variable theming

* updates

* Minor fixups and functionality tightening

* Refactor logic for handling theme updates

* poc theming work

- define top-level component variable.
- comment old variable uses out for now.
- add custom border-color class to WalletAppBadge component.

* update close button to use only current text color

- we could potentially remove the use `--onboard-close-button-color` based on these changes.

* Update Account Select to use theming

* update minimized ac component

- use new theme top level variables
- adjust layout
- remove some helper classes

* update micro ac component

- use new variables
- tweak layout, width
- try to match class names with other components

* add new theming variables to account center expanded component

- use theme background-color, text-color, and border-color
- comment out old styles for now
- adjust borders + padding spacing

* remove blue check from dapp info area

- removing because this is purely cosmetic at the moment.

* Add system option and check to theming

* account center expanded tweaks

- use --w3o-accent-text-color for  --action-color
- remove border radius from .wallets-section. We don't need it here since the parent has it.
- use white background for WalletAppBadge.

* update WalletRow component

- use new theming variables for text and bg hover color
- use ::before element trick for bg hovers

* add z-index to bg hover element

* Updating theme customizer in docs

* add fallback legacy variables for connect modal

* add legacy variable fallbacks to account center

- resolve commented out lines

* correct app name spacing

- remove h4 and p element. These elements have no semantic value in this context. No need to use.

* Update zindex of theming tool to avoid clash with docs themer

* add legacy variable override to closebutton

* update app-name styles

* remove comment for action color

* Fix ternary in handling mobile

* Cleanup defaults

* add font family override for AC button

* update WalletRow

- remove commented out code.
- add back overrides using more specific legacy variables.
- set default variable values to unset in theme mapping.

* Fix validation

* Fix validation for theming

* Update copiable theming code from customizer

* remove comments

* fix network select color issue

- remove extra space
- set --account-center-network-selector-color to --text-color

* add back border-bottom for mobile designs

* update theming variables names and values

- update --w3o variable names
- set old variables to unset for now

* fix WalletRow z-index issue

- options menu display above now

* update theme var names and set new default values

- matches new design
- supports light/dark themes
- supports older variables

* update connect modal

- use theme var names
- set new default values

* update notify border

- use new variable names

* update transaction preview components

- use new theme variables
- set default values to match design

* update notify and transaction-preview

- unset theme mapping variables
- add new theme variables

* Refactor functionality and cleanup logic

* Ready for testing

* Fix up themeing tool in docs

* Add custom theming option, enable account center

* remove --w3o-tp variables from transaction preview components

* Remove mock transaction code

* Add theming docs

* small tweaks to theme customizer

* add border-radius theme var to connect and account-center

* update indicators to use action-color theme var

- set fallback values

* update default box-shadow color

* Refine ts and README notes around theming

* Update docs/src/lib/components/ThemeCustomizer.svelte

* Update packages/transaction-preview/src/views/Maximized.svelte

* Clean up demo

* Update packages/core/src/views/account-center/WalletRow.svelte

* Update packages/transaction-preview/src/views/Maximized.svelte

* Update packages/core/src/views/account-center/WalletRow.svelte

* Fix handling of custom theme in theme customizer

* Add quickstart options to README and docs for all examples we have available

* Fix up docs layout

* Cleanup readme

* Add svelte example to options list

* Fix up core docs

* hook up hardware wallet components to theme vars

- some minor cleanup

* Update poweredBy svg var

* Update poweredBy svg var

* Fix sidebar theming

* Add rxjs handling to event listener

* update poweredby and default icon graphics

- import newer default icon svg
- use newer poweredby graphic in account center
- remove older "powered by" span with text
- plug in theme values for color to control svg
- update svg fill to use currentColor

* remove unused svg files

* Remove behavior subject

* ignore to keystone AirGapped type issue

* Handle issue for readme

Co-authored-by: Gustavo Esquinca <[email protected]>
  • Loading branch information
@Adamj1232 @gesquinca
Adamj1232 and gesquinca authored Jan 25, 2023
1 parent 3bf7c48 commit c5988e7
Show file tree
Hide file tree
Showing 70 changed files with 994 additions and 1,259 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,4 +123,4 @@ If you would like to test out the current functionality of V2 in a small browser
- Checkout the V2 feature branch: `git checkout v2-web3-onboard`
- Install the dependencies: `yarn` (if running a M1 mac - `yarn install-m1-mac`)
- Run all packages in dev mode: `yarn dev`
- [View demo app in the browser](http://localhost:8080)
- To view the demo app in the browser after running the above steps navigate to [http://localhost:8080](http://localhost:8080)
274 changes: 174 additions & 100 deletions docs/src/lib/components/ThemeCustomizer.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,27 +18,60 @@
rpcUrl: `https://mainnet.infura.io/v3/${INFURA_ID}`
},
{
id: '0x3',
token: 'tROP',
label: 'Ethereum Ropsten Testnet',
rpcUrl: `https://ropsten.infura.io/v3/${INFURA_ID}`
id: '0x5',
token: 'ETH',
label: 'Ethereum Goerli Testnet',
rpcUrl: `https://goerli.infura.io/v3/${INFURA_ID}`
},
{
id: '0x13881',
token: 'MATIC',
label: 'Polygon - Mumbai',
rpcUrl: 'https://matic-mumbai.chainstacklabs.com '
},
{
id: '0x38',
token: 'BNB',
label: 'Binance',
rpcUrl: 'https://bsc-dataseed.binance.org/'
},
{
id: 137,
token: 'MATIC',
label: 'Polygon',
rpcUrl: 'https://matic-mainnet.chainstacklabs.com'
},
{
id: 10,
token: 'OETH',
label: 'Optimism',
rpcUrl: 'https://mainnet.optimism.io'
},
{
id: 42161,
token: 'ARB-ETH',
label: 'Arbitrum',
rpcUrl: 'https://rpc.ankr.com/arbitrum'
}
],
appMetadata: {
name: 'Documentation',
icon: '<svg></svg>',
description: 'Example showcasing how to connect a wallet.',
recommendedInjectedWallets: [
{ name: 'MetaMask', url: 'https://metamask.io' },
{ name: 'Coinbase', url: 'https://wallet.coinbase.com/' }
]
},
accountCenter: {
desktop: { enabled: false },
mobile: { enabled: false }
}
desktop: { enabled: true },
mobile: { enabled: true }
},
theme: 'system'
})
const themes = ['system', 'default', 'light', 'dark', 'custom']
let selectedTheme = 'system'
// Subscribe to wallet updates
const wallets$ = onboard.state.select('wallets').pipe(share())
Expand Down Expand Up @@ -73,8 +106,9 @@
uploaded_image = undefined
webURL = ''
resetTheme()
const onboardCloseBtnVisible =
document?.querySelector('body > onboard-v2')?.shadowRoot?.querySelector('.close-button')
const onboardCloseBtnVisible = document
?.querySelector('body > onboard-v2')
?.shadowRoot?.querySelector('.close-button')
if (onboardCloseBtnVisible) onboardCloseBtnVisible?.click()
}
Expand All @@ -84,34 +118,43 @@
: onboard.connectWallet()
}
const baseStyles = {
'--background-color': '#ffffff',
'--text-color': '#1a1d26',
'--border-color': '#ebebed',
'--accent-background': '#ebebed',
'--accent-color': '#929bed',
'--accent-color-hover': '#eff1fc',
'--secondary-text-color': '#707481'
}
let defaultStyling = {...baseStyles}
const baseStyling = `--onboard-connect-sidebar-background: var(--accent-background);
--onboard-close-button-background: var(--accent-background);
--onboard-connect-sidebar-color: var(--text-color);
--onboard-connect-sidebar-progress-background: var(--secondary-text-color);
--onboard-connect-sidebar-progress-color: var(--accent-color);
--onboard-connect-header-background: var(--background-color);
--onboard-connect-header-color: var(--text-color);
--onboard-main-scroll-container-background: var(--background-color);
--onboard-link-color: var(--accent-color);
--onboard-wallet-button-background: var(--background-color);
--onboard-wallet-button-background-hover: var(--accent-color-hover);
--onboard-wallet-button-border-color: var(--border-color);
--onboard-wallet-app-icon-border-color: var(--border-color);`
const themingObjects = {
default: {
'--w3o-background-color': 'unset',
'--w3o-foreground-color': 'unset',
'--w3o-text-color': 'unset',
'--w3o-border-color': 'unset',
'--w3o-action-color': 'unset',
'--w3o-border-radius': 'unset'
},
custom: {
'--w3o-background-color': 'unset',
'--w3o-foreground-color': 'unset',
'--w3o-text-color': 'unset',
'--w3o-border-color': 'unset',
'--w3o-action-color': 'unset',
'--w3o-border-radius': 'unset'
},
light: {
'--w3o-background-color': '#ffffff',
'--w3o-foreground-color': '#EFF1FC',
'--w3o-text-color': '#1a1d26',
'--w3o-border-color': '#d0d4f7',
'--w3o-action-color': '#6370E5',
'--w3o-border-radius': '16px'
},
dark: {
'--w3o-background-color': '#1A1D26',
'--w3o-foreground-color': '#242835',
'--w3o-text-color': '#EFF1FC',
'--w3o-border-color': '#33394B',
'--w3o-action-color': '#929bed',
'--w3o-border-radius': '16px'
}
}
const styleToString = (style) => {
return Object.keys(style).reduce((acc, key) => acc + key + ': ' + style[key] + '; \n ', '')
return Object.keys(style).reduce((acc, key) => acc + `"${key}": "${style[key]}", \n`, '')
}
async function copyStylingConfig() {
Expand All @@ -123,18 +166,28 @@
}
}
let copyableStyles = `:root {\n ${styleToString(defaultStyling)}${baseStyling}\n}`
let copyableStyles =
selectedTheme !== 'custom' ? '' : `{\n ${styleToString(themingObjects[selectedTheme])}}`
const updateTheme = () => {
selectedTheme !== 'custom'
? onboard.state.actions.updateTheme(selectedTheme)
: onboard.state.actions.updateTheme('default')
copyableStyles =
selectedTheme !== 'custom' ? '' : `{\n ${styleToString(themingObjects[selectedTheme])}}`
}
const updateTheme = (e, targetStyle) => {
const updateThemeEl = (e, targetStyle) => {
if (selectedTheme !== 'custom') return
document.documentElement.style.setProperty(targetStyle, e.target.value)
copyableStyles = `:root {\n ${styleToString(defaultStyling)}${baseStyling}\n}`
copyableStyles = `{\n ${styleToString(themingObjects[selectedTheme])}}`
}
const resetTheme = () => {
defaultStyling = {...baseStyles}
Object.keys(defaultStyling).forEach(style => {
document.documentElement.style.setProperty(style, defaultStyling[style])
selectedTheme = 'custom'
Object.keys(themingObjects['custom']).forEach((style) => {
document.documentElement.style.setProperty(style, themingObjects['custom'][style])
})
}
Expand Down Expand Up @@ -187,28 +240,66 @@
<section>
<div class="control-panel">
<label for="Theme">Click Color Circles to Set Theme: </label>
<hr />
<div class="theming-container">
{#each Object.keys(defaultStyling) as target}
<div class="theming-inputs-wrapper">
<div class="theming-inputs">
<input
type="color"
name="Theme"
bind:value={defaultStyling[target]}
on:input={(e) => updateTheme(e, target)}
/>
</div>
<span class="text" id="current-theme">{target} : {defaultStyling[target]}</span>
</div>
<label>Select a theme:</label>
<select bind:value={selectedTheme} on:change={() => updateTheme()}>
{#each themes as theme}
<option value={theme}>
{theme}
</option>
{/each}
</div>
<div class="copy-styles-container">
<textarea readonly bind:value={copyableStyles} rows="10" class="copy-styles-textarea" />
<button on:click={async () => await copyStylingConfig()}> Copy Styling Config </button>
</div>
<hr />
</select>
{#if selectedTheme === 'custom'}
<label for="Theme"
>Click Color Circles to Customize Theme, Copy Config and Paste as `theme` property value in
Onboard config:
</label>
<hr />
<div class="theming-container">
{#each Object.keys(themingObjects[selectedTheme]) as target}
{#if !target.includes('border-radius')}
<div class="theming-inputs-wrapper">
<div class="theming-inputs">
<input
type="color"
name="Theme"
bind:value={themingObjects[selectedTheme][target]}
on:input={(e) => updateThemeEl(e, target)}
/>
</div>
<span class="text" id="current-theme"
>{target} : {themingObjects[selectedTheme][target]}</span
>
</div>
{:else}
<div class="theming-inputs-wrapper">
<div class="theming-inputs-text">
<input
class="br-text-input"
type="text"
bind:value={themingObjects[selectedTheme][target]}
on:input={(e) => updateThemeEl(e, target)}
/>
</div>
<span class="text" id="current-theme"
>{target} : {themingObjects[selectedTheme][target]}</span
>
</div>
{/if}
{/each}
</div>
<div class="copy-styles-container">
<textarea readonly bind:value={copyableStyles} rows="8" class="copy-styles-textarea" />
<button on:click={async () => await copyStylingConfig()}> Copy Theming Config </button>
</div>
<hr />
{:else}
<label for="Theme">
The system theme will align the theme with the users system preferences
</label>
<hr />
<div class="theming-container" />
{/if}
<div class="backdrop-toggle">
<label class="switch">
<input type="checkbox" on:change={() => handleBackdrop()} bind:checked />
Expand Down Expand Up @@ -255,40 +346,6 @@
</section>
<style>
/* iframe { width: 100%; height: 62.5rem;} */
:root {
--background-color: #ffffff; /* --white */
--text-color: #1a1d26; /* --gray-700 */
--border-color: #ebebed; /* --gray-100 taken from future mock */
--accent-background: #ebebed; /* --gray-100 (currently gray-100 in connect modal) */
--accent-color: #929bed; /* --primary-400 */
--accent-color-hover: #eff1fc; /* --primary-200 */
/* Account Center & Notify */
--secondary-text-color: #707481; /* --gray-400 (balance and token name) */
/* --secondary-accent-background: #242835; --gray-600 (Upper background in maximized) */
/* --onboard-font-family-normal: System,monospace; */
--onboard-connect-sidebar-background: var(--accent-background);
--onboard-close-button-background: var(--accent-background);
--onboard-connect-sidebar-color: var(--text-color);
--onboard-connect-sidebar-progress-background: var(
--secondary-text-color
); /* defaults to gray-200 */
--onboard-connect-sidebar-progress-color: var(--accent-color); /* defaults to primary-600 */
--onboard-connect-header-background: var(--background-color);
--onboard-connect-header-color: var(--text-color);
--onboard-main-scroll-container-background: var(--background-color);
--onboard-link-color: var(--accent-color);
--onboard-wallet-button-background: var(--background-color);
--onboard-wallet-button-background-hover: var(--accent-color-hover);
--onboard-wallet-button-color-hover: var(--text-color);
--onboard-wallet-button-color: var(--text-color);
--onboard-wallet-button-border-color: var(--border-color);
--onboard-wallet-app-icon-border-color: var(--border-color);
}
section {
position: relative;
height: 100%;
Expand All @@ -315,9 +372,9 @@
}
.control-panel {
z-index: 9999;
left: auto;
right: 0;
z-index: 25;
left: 0;
right: auto;
bottom: 0;
position: fixed;
overflow: hidden;
Expand Down Expand Up @@ -368,6 +425,18 @@
height: 2em;
margin: 0.5em;
}
.theming-inputs-text {
display: inline-flex;
align-items: center;
justify-content: center;
height: 2em;
margin: 0.25em;
}
.br-text-input {
width: 3rem;
padding: 0.25rem;
text-align: center;
}
.iframe-input {
flex: 1;
padding: 1rem;
Expand Down Expand Up @@ -503,6 +572,11 @@
transform: translateX(26px);
}
select {
width: 100%;
padding: 1rem;
}
.backdrop-toggle {
display: flex;
align-items: center;
Expand Down
Loading

0 comments on commit c5988e7

Please sign in to comment.