Skip to content

Commit 17aa2f1

Browse files
svenvoskampsvenvoskamp
authored
Add AppKit Theme Variable Prefix Support (--apkt-*) (#5278)
1 parent f4a2a37 commit 17aa2f1

9 files changed

Lines changed: 328 additions & 35 deletions

File tree

‎packages/common/src/utils/ThemeUtil.ts‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,14 @@ export interface ThemeVariables {
1010
'--w3m-border-radius-master'?: string
1111
'--w3m-z-index'?: number
1212
'--w3m-qr-color'?: string
13+
'--apkt-font-family'?: string
14+
'--apkt-accent'?: string
15+
'--apkt-color-mix'?: string
16+
'--apkt-color-mix-strength'?: number
17+
'--apkt-font-size-master'?: string
18+
'--apkt-border-radius-master'?: string
19+
'--apkt-z-index'?: number
20+
'--apkt-qr-color'?: string
1321
}
1422

1523
export interface W3mThemeVariables {
@@ -19,15 +27,18 @@ export interface W3mThemeVariables {
1927

2028
// -- Utilities ---------------------------------------------------------------
2129
export function getW3mThemeVariables(themeVariables?: ThemeVariables, themeType?: ThemeType) {
30+
// Priority: --apkt-accent > --w3m-accent > default
31+
const accent = themeVariables?.['--apkt-accent'] ?? themeVariables?.['--w3m-accent']
32+
2233
if (themeType === 'light') {
2334
return {
24-
'--w3m-accent': themeVariables?.['--w3m-accent'] || 'hsla(231, 100%, 70%, 1)',
35+
'--w3m-accent': accent || 'hsla(231, 100%, 70%, 1)',
2536
'--w3m-background': '#fff'
2637
}
2738
}
2839

2940
return {
30-
'--w3m-accent': themeVariables?.['--w3m-accent'] || 'hsla(230, 100%, 67%, 1)',
41+
'--w3m-accent': accent || 'hsla(230, 100%, 67%, 1)',
3142
'--w3m-background': '#202020'
3243
}
3344
}

‎packages/controllers/src/utils/TypeUtil.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -210,6 +210,14 @@ export interface ThemeVariables {
210210
'--w3m-border-radius-master'?: string
211211
'--w3m-z-index'?: number
212212
'--w3m-qr-color'?: string
213+
'--apkt-font-family'?: string
214+
'--apkt-accent'?: string
215+
'--apkt-color-mix'?: string
216+
'--apkt-color-mix-strength'?: number
217+
'--apkt-font-size-master'?: string
218+
'--apkt-border-radius-master'?: string
219+
'--apkt-z-index'?: number
220+
'--apkt-qr-color'?: string
213221
}
214222

215223
// -- BlockchainApiController Types ---------------------------------------------

‎packages/scaffold-ui/src/partials/w3m-connecting-wc-qrcode/index.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,11 +88,15 @@ export class W3mConnectingWcQrcode extends W3mConnectingWidget {
8888
ConnectionController.setWcLinking(undefined)
8989
ConnectionController.setRecentWallet(this.wallet)
9090

91+
const qrColor =
92+
ThemeController.state.themeVariables['--apkt-qr-color'] ??
93+
ThemeController.state.themeVariables['--w3m-qr-color']
94+
9195
return html` <wui-qr-code
9296
theme=${ThemeController.state.themeMode}
9397
uri=${this.uri}
9498
imageSrc=${ifDefined(AssetUtil.getWalletImage(this.wallet))}
95-
color=${ifDefined(ThemeController.state.themeVariables['--w3m-qr-color'])}
99+
color=${ifDefined(qrColor)}
96100
alt=${ifDefined(alt)}
97101
data-testid="wui-qr-code"
98102
></wui-qr-code>`

‎packages/scaffold-ui/src/views/w3m-connecting-farcaster-view/index.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -259,14 +259,17 @@ export class W3mConnectingFarcasterView extends LitElement {
259259
}
260260

261261
const size = this.getBoundingClientRect().width - 40
262+
const qrColor =
263+
ThemeController.state.themeVariables['--apkt-qr-color'] ??
264+
ThemeController.state.themeVariables['--w3m-qr-color']
262265

263266
return html` <wui-qr-code
264267
size=${size}
265268
theme=${ThemeController.state.themeMode}
266269
uri=${this.uri}
267270
?farcaster=${true}
268271
data-testid="wui-qr-code"
269-
color=${ifDefined(ThemeController.state.themeVariables['--w3m-qr-color'])}
272+
color=${ifDefined(qrColor)}
270273
></wui-qr-code>`
271274
}
272275

‎packages/scaffold-ui/src/views/w3m-wallet-receive-view/index.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,10 @@ export class W3mWalletReceiveView extends LitElement {
9797
theme=${ThemeController.state.themeMode}
9898
uri=${this.address}
9999
?arenaClear=${true}
100-
color=${ifDefined(ThemeController.state.themeVariables['--w3m-qr-color'])}
100+
color=${ifDefined(
101+
ThemeController.state.themeVariables['--apkt-qr-color'] ??
102+
ThemeController.state.themeVariables['--w3m-qr-color']
103+
)}
101104
data-testid="wui-qr-code"
102105
></wui-qr-code>
103106
<wui-text variant="lg-regular" color="primary" align="center">

‎packages/ui/src/utils/ThemeHelperUtil.ts‎

Lines changed: 65 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,42 @@ import type { ThemeVariables } from './TypeUtil.js'
77

88
const PREFIX_VAR = '--apkt'
99

10+
function normalizeThemeVariables(themeVariables?: ThemeVariables): Record<string, string | number> {
11+
if (!themeVariables) {
12+
return {}
13+
}
14+
15+
const normalized: Record<string, string | number> = {}
16+
17+
normalized['font-family'] =
18+
themeVariables['--apkt-font-family'] ?? themeVariables['--w3m-font-family'] ?? 'KHTeka'
19+
20+
normalized['accent'] =
21+
themeVariables['--apkt-accent'] ?? themeVariables['--w3m-accent'] ?? '#0988F0'
22+
23+
normalized['color-mix'] =
24+
themeVariables['--apkt-color-mix'] ?? themeVariables['--w3m-color-mix'] ?? '#000'
25+
26+
normalized['color-mix-strength'] =
27+
themeVariables['--apkt-color-mix-strength'] ?? themeVariables['--w3m-color-mix-strength'] ?? 0
28+
29+
normalized['font-size-master'] =
30+
themeVariables['--apkt-font-size-master'] ?? themeVariables['--w3m-font-size-master'] ?? '10px'
31+
32+
normalized['border-radius-master'] =
33+
themeVariables['--apkt-border-radius-master'] ??
34+
themeVariables['--w3m-border-radius-master'] ??
35+
'4px'
36+
37+
if (themeVariables['--apkt-z-index'] !== undefined) {
38+
normalized['z-index'] = themeVariables['--apkt-z-index']
39+
} else if (themeVariables['--w3m-z-index'] !== undefined) {
40+
normalized['z-index'] = themeVariables['--w3m-z-index']
41+
}
42+
43+
return normalized
44+
}
45+
1046
export const ThemeHelperUtil = {
1147
/**
1248
* Recursively transforms a nested styles object into a new object with CSS variable strings.
@@ -142,15 +178,16 @@ export const ThemeHelperUtil = {
142178
return {}
143179
}
144180

181+
const normalized = normalizeThemeVariables(themeVariables)
145182
const variables: Record<string, string> = {}
146183

147-
// Set default values and user overrides
148-
variables['--w3m-font-family'] = themeVariables['--w3m-font-family'] || 'KHTeka'
149-
variables['--w3m-accent'] = themeVariables['--w3m-accent'] || '#0988F0'
150-
variables['--w3m-color-mix'] = themeVariables['--w3m-color-mix'] || '#000'
151-
variables['--w3m-color-mix-strength'] = `${themeVariables['--w3m-color-mix-strength'] || 0}%`
152-
variables['--w3m-font-size-master'] = themeVariables['--w3m-font-size-master'] || '10px'
153-
variables['--w3m-border-radius-master'] = themeVariables['--w3m-border-radius-master'] || '4px'
184+
// Set default values and user overrides (keep --w3m-* names for backwards compatibility)
185+
variables['--w3m-font-family'] = normalized['font-family'] as string
186+
variables['--w3m-accent'] = normalized['accent'] as string
187+
variables['--w3m-color-mix'] = normalized['color-mix'] as string
188+
variables['--w3m-color-mix-strength'] = `${normalized['color-mix-strength']}%`
189+
variables['--w3m-font-size-master'] = normalized['font-size-master'] as string
190+
variables['--w3m-border-radius-master'] = normalized['border-radius-master'] as string
154191

155192
return variables
156193
},
@@ -163,23 +200,24 @@ export const ThemeHelperUtil = {
163200
return {}
164201
}
165202

203+
const normalized = normalizeThemeVariables(themeVariables)
166204
const overrides: Record<string, string> = {}
167205

168-
// Map --w3m-accent to accent-related --apkt variables
169-
if (themeVariables['--w3m-accent']) {
170-
const accentColor = themeVariables['--w3m-accent']
206+
// Map accent to accent-related --apkt variables (check both prefixes)
207+
if (themeVariables['--apkt-accent'] || themeVariables['--w3m-accent']) {
208+
const accentColor = normalized['accent'] as string
171209
overrides['--apkt-tokens-core-iconAccentPrimary'] = accentColor
172210
overrides['--apkt-tokens-core-borderAccentPrimary'] = accentColor
173211
overrides['--apkt-tokens-core-textAccentPrimary'] = accentColor
174212
overrides['--apkt-tokens-core-backgroundAccentPrimary'] = accentColor
175213
}
176214

177-
if (themeVariables['--w3m-font-family']) {
178-
overrides['--apkt-fontFamily-regular'] = themeVariables['--w3m-font-family']
215+
if (themeVariables['--apkt-font-family'] || themeVariables['--w3m-font-family']) {
216+
overrides['--apkt-fontFamily-regular'] = normalized['font-family'] as string
179217
}
180218

181-
if (themeVariables['--w3m-z-index']) {
182-
overrides['--apkt-tokens-core-zIndex'] = `${themeVariables['--w3m-z-index']}`
219+
if (normalized['z-index'] !== undefined) {
220+
overrides['--apkt-tokens-core-zIndex'] = `${normalized['z-index']}`
183221
}
184222

185223
return overrides
@@ -193,10 +231,11 @@ export const ThemeHelperUtil = {
193231
return {}
194232
}
195233

234+
const normalized = normalizeThemeVariables(themeVariables)
196235
const scaledVars: Record<string, string> = {}
197236

198-
if (themeVariables['--w3m-font-size-master']) {
199-
const masterSize = parseFloat(themeVariables['--w3m-font-size-master'].replace('px', ''))
237+
if (themeVariables['--apkt-font-size-master'] || themeVariables['--w3m-font-size-master']) {
238+
const masterSize = parseFloat((normalized['font-size-master'] as string).replace('px', ''))
200239

201240
// 50px default
202241
scaledVars['--apkt-textSize-h1'] = `${Number(masterSize) * 5}px`
@@ -218,10 +257,13 @@ export const ThemeHelperUtil = {
218257
scaledVars['--apkt-textSize-small'] = `${Number(masterSize) * 1.2}px`
219258
}
220259

221-
// Scale border radius based on --w3m-border-radius-master
222-
if (themeVariables['--w3m-border-radius-master']) {
260+
// Scale border radius based on --apkt-border-radius-master or --w3m-border-radius-master
261+
if (
262+
themeVariables['--apkt-border-radius-master'] ||
263+
themeVariables['--w3m-border-radius-master']
264+
) {
223265
const masterRadius = parseFloat(
224-
themeVariables['--w3m-border-radius-master'].replace('px', '')
266+
(normalized['border-radius-master'] as string).replace('px', '')
225267
)
226268

227269
// 4px default
@@ -371,12 +413,10 @@ export const ThemeHelperUtil = {
371413
'var(--apkt-tokens-core-backgroundAccentPrimary-base)'
372414
}
373415

374-
if (!themeVariables?.['--w3m-color-mix'] || !themeVariables['--w3m-color-mix-strength']) {
375-
return colorMixVariables
376-
}
377-
378-
const colorMix = themeVariables['--w3m-color-mix']
379-
const strength = themeVariables['--w3m-color-mix-strength']
416+
// Use normalized values to respect --apkt-* precedence
417+
const normalized = normalizeThemeVariables(themeVariables)
418+
const colorMix = normalized['color-mix']
419+
const strength = normalized['color-mix-strength']
380420

381421
if (!strength || strength === 0) {
382422
return colorMixVariables

‎packages/ui/src/utils/ThemeUtil.ts‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,9 @@ export function initializeTheming(themeVariables?: ThemeVariables, themeMode: Th
4848
createAppKitTheme(themeVariables, themeMode)
4949
setColorTheme(themeMode)
5050

51-
if (!themeVariables?.['--w3m-font-family']) {
51+
const hasCustomFont =
52+
themeVariables?.['--apkt-font-family'] || themeVariables?.['--w3m-font-family']
53+
if (!hasCustomFont) {
5254
for (const [key, url] of Object.entries(fonts)) {
5355
const link = document.createElement('link')
5456
link.rel = 'preload'
@@ -84,8 +86,9 @@ export function setThemeVariables(_themeVariables?: ThemeVariables) {
8486
themeTag.textContent = createRootStyles(_themeVariables).core.cssText
8587
darkModeTag.textContent = createRootStyles(_themeVariables).dark.cssText
8688
lightModeTag.textContent = createRootStyles(_themeVariables).light.cssText
87-
if (_themeVariables?.['--w3m-font-family']) {
88-
const fontFamily = _themeVariables['--w3m-font-family']
89+
const fontFamily =
90+
_themeVariables?.['--apkt-font-family'] || _themeVariables?.['--w3m-font-family']
91+
if (fontFamily) {
8992
themeTag.textContent = themeTag.textContent?.replace(
9093
'font-family: KHTeka',
9194
`font-family: ${fontFamily}`
@@ -108,7 +111,9 @@ export function setThemeVariables(_themeVariables?: ThemeVariables) {
108111
}
109112

110113
export function createRootStyles(_themeVariables?: ThemeVariables) {
111-
const hasCustomFontFamily = Boolean(_themeVariables?.['--w3m-font-family'])
114+
const hasCustomFontFamily = Boolean(
115+
_themeVariables?.['--apkt-font-family'] || _themeVariables?.['--w3m-font-family']
116+
)
112117

113118
return {
114119
core: css`

‎packages/ui/src/utils/TypeUtil.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -372,6 +372,15 @@ export interface ThemeVariables {
372372
'--w3m-font-size-master'?: string
373373
'--w3m-border-radius-master'?: string
374374
'--w3m-z-index'?: number
375+
'--w3m-qr-color'?: string
376+
'--apkt-font-family'?: string
377+
'--apkt-accent'?: string
378+
'--apkt-color-mix'?: string
379+
'--apkt-color-mix-strength'?: number
380+
'--apkt-font-size-master'?: string
381+
'--apkt-border-radius-master'?: string
382+
'--apkt-z-index'?: number
383+
'--apkt-qr-color'?: string
375384
}
376385

377386
export type IconBoxBorderType = 'wui-color-bg-125' | 'wui-accent-glass-010'

0 commit comments

Comments
 (0)