feat(ui): paint VK status bar to the app theme (VKWebAppSetViewSettings)
CI / changes (pull_request) Successful in 2s
CI / unit (pull_request) Has been skipped
CI / integration (pull_request) Has been skipped
CI / ui (pull_request) Successful in 58s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 2m13s
CI / changes (pull_request) Successful in 2s
CI / unit (pull_request) Has been skipped
CI / integration (pull_request) Has been skipped
CI / ui (pull_request) Successful in 58s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 2m13s
Parity with the Telegram chrome painting: on a VK Mini App launch and on every theme change, set VK's status-bar appearance (and, on Android, the action/navigation bar colours) from the app's live theme tokens, so the VK chrome matches the UI instead of clashing. syncVKChrome mirrors syncTelegramChrome; the status-bar appearance is derived from the --bg token's luminance (appearanceForBg, unit-tested). Wired into the VK onScheme handler (fires on launch + on theme change) and setTheme. Docs: UI_DESIGN VK integration.
This commit is contained in:
+23
-1
@@ -1,5 +1,5 @@
|
||||
import { afterEach, describe, expect, it, vi } from 'vitest';
|
||||
import { insideVK, onVKPath, vkAppId, vkLaunchParams, vkStartParam } from './vk';
|
||||
import { insideVK, onVKPath, vkAppId, vkLaunchParams, vkStartParam, appearanceForBg } from './vk';
|
||||
|
||||
describe('vk launch detection', () => {
|
||||
afterEach(() => vi.unstubAllGlobals());
|
||||
@@ -49,3 +49,25 @@ describe('vk launch params', () => {
|
||||
expect(vkStartParam()).toBe('');
|
||||
});
|
||||
});
|
||||
|
||||
describe('appearanceForBg', () => {
|
||||
it('maps a dark background to the dark appearance (light status-bar icons)', () => {
|
||||
expect(appearanceForBg('#0f1115')).toBe('dark');
|
||||
expect(appearanceForBg('#171a21')).toBe('dark');
|
||||
});
|
||||
|
||||
it('maps a light background to the light appearance (dark status-bar icons)', () => {
|
||||
expect(appearanceForBg('#f3f4f6')).toBe('light');
|
||||
expect(appearanceForBg('#ffffff')).toBe('light');
|
||||
});
|
||||
|
||||
it('accepts shorthand hex and surrounding whitespace (a raw CSS custom-property value)', () => {
|
||||
expect(appearanceForBg('#000')).toBe('dark');
|
||||
expect(appearanceForBg(' #fff ')).toBe('light');
|
||||
});
|
||||
|
||||
it('defaults to light for an unparseable colour', () => {
|
||||
expect(appearanceForBg('')).toBe('light');
|
||||
expect(appearanceForBg('rgb(0, 0, 0)')).toBe('light');
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user