Skip to content

Commit dd124f9

Browse files
authored
[core-v2.4.0-alpha.9, react-v2.2.3-alpha.6, vue-v2.1.3-alpha.6] : Feature - Expose css variables per AlienWorld and version bumps (#1139)
* Update css variables per AlienWorld and version bumps * Prettier * Add type-check and build step to PR request template * Version bumps and merge develop * More cleanup
1 parent 9735596 commit dd124f9

File tree

11 files changed

+251
-268
lines changed

11 files changed

+251
-268
lines changed

packages/core/README.md

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -733,9 +733,24 @@ The Onboard styles can customized via [CSS variables](https://developer.mozilla.
733733
--onboard-warning-600: #cc8c00;
734734
--onboard-warning-700: #664600;
735735

736-
/* CUSTOMIZE ACCOUNT CENTER STACK POSITIONING*/
736+
/* CUSTOMIZE ACCOUNT CENTER*/
737737
--account-center-z-index
738-
738+
--account-center-minimized-background
739+
--account-center-maximized-upper-background
740+
--account-center-maximized-network-section
741+
--account-center-maximized-app-info-section
742+
--account-center-minimized-address-color
743+
--account-center-maximized-address-color
744+
--account-center-maximized-account-section-background-hover
745+
--account-center-maximized-action-background-hover
746+
--account-center-minimized-chain-select-background
747+
--account-center-network-selector-color
748+
--account-center-maximized-network-selector-color
749+
--account-center-minimized-network-selector-color
750+
--account-center-app-btn-text-color
751+
--account-center-app-btn-background
752+
--account-center-app-btn-font-family
753+
739754
/* CUSTOMIZE SECTIONS OF THE CONNECT MODAL */
740755
--onboard-connect-content-width
741756
--onboard-connect-content-height

packages/core/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@web3-onboard/core",
3-
"version": "2.4.0-alpha.8",
3+
"version": "2.4.0-alpha.9",
44
"description": "Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.",
55
"keywords": [
66
"Ethereum",

packages/core/src/validation.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -198,7 +198,8 @@ const accountCenter = Joi.object({
198198
enabled: Joi.boolean(),
199199
position: commonPositions,
200200
expanded: Joi.boolean(),
201-
minimal: Joi.boolean()
201+
minimal: Joi.boolean(),
202+
containerElement: Joi.string()
202203
})
203204

204205
const customNotificationUpdate = Joi.object({

packages/core/src/views/account-center/Maximized.svelte

Lines changed: 26 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,10 @@
5050

5151
<style>
5252
.outer-container {
53-
background: var(--onboard-gray-600, var(--gray-600));
53+
background: var(
54+
--account-center-maximized-upper-background,
55+
var(--onboard-gray-600, var(--gray-600))
56+
);
5457
border-radius: var(--onboard-border-radius-3, var(--border-radius-3));
5558
width: 100%;
5659
filter: drop-shadow(0px 4px 16px rgba(178, 178, 178, 0.2));
@@ -84,7 +87,10 @@
8487
}
8588
8689
.action-container:hover {
87-
background-color: rgba(146, 155, 237, 0.2);
90+
background-color: var(
91+
--account-center-maximized-action-background-hover,
92+
rgba(146, 155, 237, 0.2)
93+
);
8894
}
8995
9096
.plus-icon {
@@ -119,7 +125,10 @@
119125
120126
.network-container {
121127
border-radius: var(--onboard-border-radius-3, var(--border-radius-3));
122-
color: var(--onboard-gray-500, var(--gray-500));
128+
color: var(
129+
--account-center-maximized-network-section,
130+
var(--onboard-gray-500, var(--gray-500))
131+
);
123132
}
124133
125134
.p5-5 {
@@ -136,7 +145,10 @@
136145
}
137146
138147
.app-info-container {
139-
background: var(--onboard-white, var(--white));
148+
background: var(
149+
--account-center-maximized-app-info-section,
150+
var(--onboard-white, var(--white))
151+
);
140152
border-radius: 16px;
141153
padding: 12px;
142154
}
@@ -183,6 +195,15 @@
183195
184196
.app-button {
185197
margin-top: var(--onboard-spacing-5, var(--spacing-5));
198+
color: var(
199+
--account-center-app-btn-text-color,
200+
var(--onboard-white, var(--white))
201+
);
202+
background: var(
203+
--account-center-app-btn-background,
204+
var(--onboard-gray-500, var(--gray-500))
205+
);
206+
font-family: var(--account-center-app-btn-font-family, inherit);
186207
}
187208
188209
.powered-by-container {
@@ -318,7 +339,7 @@
318339
<div on:click class="flex items-center">
319340
<NetworkBadgeSelector
320341
chains={appChains}
321-
color="#33394B"
342+
colorVar="--account-center-maximized-network-selector-color"
322343
bold={true}
323344
selectIcon={caretLightIcon}
324345
/>

packages/core/src/views/account-center/Minimized.svelte

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,10 @@
5858

5959
<style>
6060
.minimized {
61-
background: var(--onboard-white, var(--white));
61+
background: var(
62+
--account-center-minimized-background,
63+
var(--onboard-white, var(--white))
64+
);
6265
border: 1px solid var(--onboard-gray-100, var(--gray-100));
6366
width: 100%;
6467
box-shadow: var(--onboard-shadow-3, var(--shadow-3));
@@ -80,6 +83,7 @@
8083
.address {
8184
font-weight: 700;
8285
line-height: var(--onboard-font-line-height-2, var(--font-line-height-2));
86+
color: var(--account-center-minimized-address-color, initial);
8387
}
8488
8589
.balance {
@@ -178,7 +182,9 @@
178182
class="container shadow-1 flex items-center"
179183
style={`border-color: ${
180184
validAppChain ? '#D0D4F7' : '#FFAF00'
181-
}; background-color: ${validAppChain ? '#EFF1FC' : '#FFEFCC'}`}
185+
}; background-color: var(--account-center-minimized-chain-select-background, var(${
186+
validAppChain ? '--primary-100' : '--warning-100'
187+
}))`}
182188
>
183189
<div class="flex items-center">
184190
<div
@@ -200,7 +206,11 @@
200206
: warningIcon}
201207
</div>
202208

203-
<NetworkSelector {chains} color="#33394B" selectIcon={caretIcon} />
209+
<NetworkSelector
210+
{chains}
211+
colorVar="--account-center-minimized-network-selector-color"
212+
selectIcon={caretIcon}
213+
/>
204214
</div>
205215
</div>
206216
</div>

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,10 @@
7070
}
7171
7272
.container:hover {
73-
background: var(--onboard-gray-500, var(--gray-500));
73+
background: var(
74+
--account-center-maximized-account-section-background-hover,
75+
var(--onboard-gray-500, var(--gray-500))
76+
);
7477
}
7578
7679
.container:hover > div > span.balance {
@@ -84,7 +87,10 @@
8487
.address-ens {
8588
margin-left: 0.5rem;
8689
font-weight: 700;
87-
color: var(--onboard-primary-100, var(--primary-100));
90+
color: var(
91+
--account-center-maximized-address-color,
92+
var(--onboard-primary-100, var(--primary-100))
93+
);
8894
}
8995
9096
.balance {

packages/core/src/views/shared/NetworkSelector.svelte

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
import caretIcon from '../../icons/caret'
99
1010
export let selectIcon: string = caretIcon
11-
export let color = '#33394B'
11+
export let colorVar: string
1212
export let chains: Chain[]
1313
export let bold = false
1414
@@ -95,14 +95,24 @@
9595

9696
{#if wallet}
9797
{#if $switching$}
98-
<span style={`color: ${color}; padding: 0 8px 0 4px;`}>switching...</span>
98+
<span
99+
style={`
100+
color: var(${colorVar},
101+
var(--account-center-network-selector-color, var (--gray-500)));
102+
padding: 0 8px 0 4px;
103+
`}
104+
>switching...</span
105+
>
99106
{:else}
100107
<select
101108
class="flex justify-center items-center pointer"
102109
bind:this={selectElement}
103110
value={wallet.chains[0].id}
104111
on:change={handleSelect}
105-
style={`color: ${color}; background-image: url('data:image/svg+xml;utf8,${selectIcon}'); ${
112+
style={`
113+
color: var(${colorVar},
114+
var(--account-center-network-selector-color, var (--gray-500)));
115+
background-image: url('data:image/svg+xml;utf8,${selectIcon}'); ${
106116
bold ? 'font-weight: 700;' : ''
107117
}`}
108118
>

packages/react/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@web3-onboard/react",
3-
"version": "2.2.3-alpha.5",
3+
"version": "2.2.3-alpha.6",
44
"description": "A collection of React hooks for integrating Web3-Onboard in to React and Next.js projects. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.",
55
"keywords": [
66
"Ethereum",
@@ -59,7 +59,7 @@
5959
"typescript": "^4.5.5"
6060
},
6161
"dependencies": {
62-
"@web3-onboard/core": "^2.4.0-alpha.8",
62+
"@web3-onboard/core": "^2.4.0-alpha.9",
6363
"@web3-onboard/common": "^2.1.4",
6464
"use-sync-external-store": "1.0.0"
6565
},

packages/vue/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@web3-onboard/vue",
3-
"version": "2.1.3-alpha.5",
3+
"version": "2.1.3-alpha.6",
44
"description": "A collection of Vue Composables for integrating Web3-Onboard in to a Vue or Nuxt project. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.",
55
"keywords": [
66
"Ethereum",
@@ -60,7 +60,7 @@
6060
"@vueuse/core": "^8.4.2",
6161
"@vueuse/rxjs": "^8.2.0",
6262
"@web3-onboard/common": "^2.1.4",
63-
"@web3-onboard/core": "^2.4.0-alpha.8",
63+
"@web3-onboard/core": "^2.4.0-alpha.9",
6464
"vue-demi": "^0.12.4"
6565
},
6666
"peerDependencies": {

pull_request_template.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,5 @@
55
- [ ] The version field in `package.json` is incremented following [semantic versioning](https://semver.org/)
66
- [ ] The box that allows repo maintainers to update this PR is checked
77
- [ ] I tested locally to make sure this feature/fix works
8+
- [ ] I have run `yarn type-check` & `yarn build` to confirm there are not any associated errors
89
- [ ] This PR passes the Circle CI checks

0 commit comments

Comments
 (0)