Skip to content

Commit e760d2b

Browse files
Adamj1232lnbc1QWFyb24gesquinca
authored
Feature - New Font Usage (Inter) and Dynamic Font Handling (#1597)
* Remove semi-bold * Versions bumped * Create font-family theme variable * Working as of now * Remove old fonts for loading weight * Refactor for new fonts and dynamic loading * Refine usage when theme is set * Update packages/core/src/index.ts Co-authored-by: Aaron <abarnard@protonmail.com> * Reorder logic for detecting css var * Bump packages and yarnit * Fix versions missed * Dynamic refactor and push missing commit * refactor and using cdn for inter * Refine and tested * Refactor weight and imports * replace 3 periods for ellipsis character * Pin joi version * fix account center wallet row overflow when long values are present * Fix merge conf --------- Co-authored-by: Aaron <abarnard@protonmail.com> Co-authored-by: Gustavo Esquinca <g.esq.ca@gmail.com>
1 parent 494dd26 commit e760d2b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

66 files changed

+584
-458
lines changed

‎docs/src/lib/components/ThemeCustomizer.svelte

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -81,31 +81,35 @@
8181
'--w3o-text-color': 'unset',
8282
'--w3o-border-color': 'unset',
8383
'--w3o-action-color': 'unset',
84-
'--w3o-border-radius': 'unset'
84+
'--w3o-border-radius': 'unset',
85+
'--w3o-font-family': 'unset'
8586
},
8687
custom: {
8788
'--w3o-background-color': 'unset',
8889
'--w3o-foreground-color': 'unset',
8990
'--w3o-text-color': 'unset',
9091
'--w3o-border-color': 'unset',
9192
'--w3o-action-color': 'unset',
92-
'--w3o-border-radius': 'unset'
93+
'--w3o-border-radius': 'unset',
94+
'--w3o-font-family': 'unset'
9395
},
9496
light: {
9597
'--w3o-background-color': '#ffffff',
9698
'--w3o-foreground-color': '#EFF1FC',
9799
'--w3o-text-color': '#1a1d26',
98100
'--w3o-border-color': '#d0d4f7',
99101
'--w3o-action-color': '#6370E5',
100-
'--w3o-border-radius': '16px'
102+
'--w3o-border-radius': '16px',
103+
'--w3o-font-family': 'unset'
101104
},
102105
dark: {
103106
'--w3o-background-color': '#1A1D26',
104107
'--w3o-foreground-color': '#242835',
105108
'--w3o-text-color': '#EFF1FC',
106109
'--w3o-border-color': '#33394B',
107110
'--w3o-action-color': '#929bed',
108-
'--w3o-border-radius': '16px'
111+
'--w3o-border-radius': '16px',
112+
'--w3o-font-family': 'unset'
109113
}
110114
}
111115

‎docs/src/routes/docs/[...2]getting-started/[...3]custom-styling.md

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -127,9 +127,7 @@ The Onboard styles can customized via [CSS custom properties](https://developer.
127127
--onboard-action-required-modal-background
128128

129129
/* FONTS */
130-
--onboard-font-family-normal: Sofia Pro;
131-
--onboard-font-family-semibold: Sofia Pro Semibold;
132-
--onboard-font-family-light: Sofia Pro Light;
130+
--onboard-font-family-normal: Inter, sans-serif;
133131

134132
--onboard-font-size-1: 3rem;
135133
--onboard-font-size-2: 2.25rem;
@@ -197,8 +195,7 @@ The Onboard styles can customized via [CSS custom properties](https://developer.
197195
--account-select-modal-danger-500: #ff4f4f;
198196

199197
/* FONTS */
200-
--account-select-modal-font-family-normal: Sofia Pro;
201-
--account-select-modal-font-family-light: Sofia Pro Light;
198+
--account-select-modal-font-family-normal: Inter, sans-serif;
202199
--account-select-modal-font-size-5: 1rem;
203200
--account-select-modal-font-size-7: .75rem;
204201
--account-select-modal-font-line-height-1: 24px;

‎docs/src/routes/docs/[...3]modules/core.md

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -90,10 +90,18 @@ type InitOptions {
9090
* Object mapping for W3O components with the key being the component and the value the DOM element to mount the component to. This element must be available at time of package script execution.
9191
*/
9292
containerElements?: Partial<ContainerElements>
93-
/**
93+
/**
9494
* Custom or predefined theme for Web3Onboard i.e. default, dark, Custom, etc.
9595
*/
9696
theme?: Theme
97+
/**
98+
* Defaults to False
99+
* If set to true the Inter font will not be imported and
100+
* instead the default 'sans-serif' font will be used
101+
* To define the font used see `--w3o-font-family` prop within
102+
* the Theme initialization object or set as css variable
103+
*/
104+
disableFontDownload?: boolean
97105
}
98106

99107
```
@@ -264,6 +272,7 @@ export type BuiltInThemes = 'default' | 'dark' | 'light'
264272

265273
export type ThemingMap = {
266274
'--w3o-background-color'?: string
275+
'--w3o-font-family'?: string
267276
'--w3o-foreground-color'?: string
268277
'--w3o-text-color'?: string
269278
'--w3o-border-color'?: string
@@ -282,6 +291,17 @@ It will allow you to customize the look and feel of web3-onboard, try different
282291
283292
---
284293
294+
#### disableFontDownload
295+
296+
If set to `true` the default `Inter` font will not be imported and instead the web based `sans-serif` font will be used if a font is not defined through the `Theme` or exposed css variable.
297+
To define the font use `--w3o-font-family` prop within the `Theme` initialization object or set as a css variable.
298+
299+
```typescript
300+
type disableFontDownload = boolean // defaults to false
301+
```
302+
303+
---
304+
285305
#### accountCenter
286306
287307
An object that defines whether the account center UI (default and minimal) is enabled and its position on the screen. Currently the account center is enabled for both desktop and mobile devices.
@@ -1102,9 +1122,7 @@ The Onboard styles can be customized via [CSS variables](https://developer.mozil
11021122
--onboard-action-required-modal-background
11031123

11041124
/* FONTS */
1105-
--onboard-font-family-normal: Sofia Pro;
1106-
--onboard-font-family-semibold: Sofia Pro Semibold;
1107-
--onboard-font-family-light: Sofia Pro Light;
1125+
--onboard-font-family-normal: Inter, sans-serif;
11081126

11091127
--onboard-font-size-1: 3rem;
11101128
--onboard-font-size-2: 2.25rem;
@@ -1172,8 +1190,7 @@ The Onboard styles can be customized via [CSS variables](https://developer.mozil
11721190
--account-select-modal-danger-500: #ff4f4f;
11731191

11741192
/* FONTS */
1175-
--account-select-modal-font-family-normal: Sofia Pro;
1176-
--account-select-modal-font-family-light: Sofia Pro Light;
1193+
--account-select-modal-font-family-normal: Inter, sans-serif;
11771194
--account-select-modal-font-size-5: 1rem;
11781195
--account-select-modal-font-size-7: .75rem;
11791196
--account-select-modal-font-line-height-1: 24px;

‎docs/src/routes/docs/[...4]wallets/magic.md

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -102,8 +102,7 @@ The Magic Wallet Login styles can customized via [CSS variables](https://develop
102102
--login-modal-danger-500: #ff4f4f;
103103

104104
/* FONTS */
105-
--login-modal-font-family-normal: Sofia Pro;
106-
--login-modal-font-family-light: Sofia Pro Light;
105+
--login-modal-font-family-normal: Inter, sans-serif;
107106
--login-modal-font-size-5: 1rem;
108107
--login-modal-font-line-height-1: 24px;
109108

0 commit comments

Comments
 (0)