fix:
1. 修复登录界面文字被遮挡问题 2. 大字模式关闭后显示异常问题 3. 重新调整大字模式是否开启时的字体显示效果
This commit is contained in:
@@ -1,12 +1,14 @@
|
||||
/**
|
||||
* Typography context for large text mode (大字模式).
|
||||
* Global typography from design tokens.
|
||||
*
|
||||
* - **关大字模式** → `typography.large`(舒适基准,不用过小的 `normal` 档)
|
||||
* - **开大字模式** → `typography.xlarge`(一级页、正文等整体再放大一档)
|
||||
*
|
||||
* 对话气泡等仍可在页面内用 `largeText` 做更大一级的 token 选择。
|
||||
*
|
||||
* Uses React Context instead of NativeWind vars() because vars() returns empty
|
||||
* objects on native (iOS/Android), so CSS variables never cascade to children.
|
||||
* See: https://github.com/nativewind/nativewind/issues/1113
|
||||
*
|
||||
* NativeWind vars() docs (works on web only):
|
||||
* https://www.nativewind.dev/docs/api/vars
|
||||
* objects on native (iOS/Android). See:
|
||||
* https://github.com/nativewind/nativewind/issues/1113
|
||||
*/
|
||||
import React, {
|
||||
createContext,
|
||||
@@ -19,18 +21,23 @@ import { useAppSettings } from '@/hooks/use-app-settings';
|
||||
|
||||
import tokens from '../../design-tokens.json';
|
||||
|
||||
export type TypographyMode = 'normal' | 'large';
|
||||
export type TypographyScale = 'large' | 'xlarge';
|
||||
|
||||
export type TypographyTokens = Record<string, number>;
|
||||
|
||||
const TypographyContext = createContext<TypographyTokens | null>(null);
|
||||
|
||||
const SCALE: Record<TypographyScale, TypographyTokens> = {
|
||||
large: tokens.typography.large as TypographyTokens,
|
||||
xlarge: tokens.typography.xlarge as TypographyTokens,
|
||||
};
|
||||
|
||||
export function TypographyProvider({ children }: PropsWithChildren) {
|
||||
const { largeText } = useAppSettings();
|
||||
const typography = useMemo(() => {
|
||||
const mode: TypographyMode = largeText ? 'large' : 'normal';
|
||||
return tokens.typography[mode] as TypographyTokens;
|
||||
}, [largeText]);
|
||||
const typography = useMemo(
|
||||
() => SCALE[largeText ? 'xlarge' : 'large'],
|
||||
[largeText],
|
||||
);
|
||||
|
||||
return (
|
||||
<TypographyContext.Provider value={typography}>
|
||||
|
||||
Reference in New Issue
Block a user