@unif/react-native-design 0.1.0

package/src/theme/colors.ts

@@ -0,0 +1,196 @@
+// Role-based color tokens —— role 名固定,亮/暗主题切的是 role 指向哪个 hex。
+
+export const lightColors = {
+  // Brand
+  primary: '#EB6E00',
+  primaryPressed: '#D06200',
+  primaryContainer: '#FFF5EB',
+  primaryContainerSubtle: '#FFF8F0',
+  /** 品牌橙 10% alpha 浅底 —— icon tile 等屏内重复浅橙铺色。 */
+  brandTint10: 'rgba(235,110,0,0.10)',
+  /** 品牌橙 14% alpha —— Me 屏角色徽章。 */
+  brandTint14: 'rgba(235,110,0,0.14)',
+  onPrimary: '#FFFFFF',
+  onPrimaryMuted: 'rgba(255,255,255,0.85)',
+
+  // Semantic
+  success: '#52C41A',
+  successContainer: '#F0FFF0',
+  onSuccess: '#FFFFFF',
+  error: '#F4511E',
+  errorContainer: '#FFF5F5',
+  onError: '#FFFFFF',
+  info: '#3775F6',
+  infoContainer: '#F0F5FF',
+  onInfo: '#FFFFFF',
+
+  // Surface (5-layer)
+  background: '#F5F5F5',
+  surface: '#FFFFFF',
+  surfaceContainer: '#F5F5F5',
+  surfaceContainerHigh: '#F0F0F0',
+  surfaceContainerHighest: '#E0E0E0',
+
+  // Foreground
+  foreground: '#333333',
+  foregroundMuted: '#666666',
+  foregroundSubtle: '#999999',
+  onSurface: '#333333',
+  onSurfaceMuted: '#666666',
+
+  // Outline
+  outline: '#EDEDED',
+  outlineVariant: '#E8E8E8',
+  outlineFaint: '#F5F5F5',
+
+  // Inverse
+  inverseSurface: '#1C1C1E',
+  inverseOnSurface: '#FFFFFF',
+
+  // Misc
+  scrim: 'rgba(0,0,0,0.5)',
+  /** Sheet backdrop —— sheet 之下浅灰 tint,合规态高对比度让 sheet 焦点突出。
+   *  跟通用 scrim(黑半透"普通遮挡")区分:这是"焦点引导"。 */
+  sheetBackdrop: 'rgba(245,245,247,0.72)',
+  /** 玻璃感浅色 tint —— BlurView 之上的 0.55 白纱(数据条 / scanBtn)。 */
+  glassTintLight: 'rgba(255,255,255,0.55)',
+  /** 玻璃容器内部分隔线 —— 暗色翻成对应低透白,保证暗底可见。 */
+  glassSeparator: 'rgba(0,0,0,0.08)',
+  /** 浮动玻璃胶囊外区 tint(TabBar 滚动玻璃门)。
+   *  数值配合 blurAmount=25 让"玻璃门外区滚动内容透过模糊显示"达成。
+   *  跟 glassTintLight 区分:此 token 给"玻璃门外区"语义。 */
+  glassSurface: 'rgba(255,255,255,0.20)',
+  /** TabBar 玻璃门 tint —— 跟 glassSurface 区分,真机实测 0.20 太厚看不清滚动内容,
+   *  TabBar 场景配合 blurAmount=15 主导,语义不同不可复用同一个 alpha。 */
+  tabBarGlassTint: 'rgba(255,255,255,0.10)',
+  /** 玻璃胶囊边框(亮 0.18 / 暗 0.14 白透)。 */
+  glassBorder: 'rgba(255,255,255,0.18)',
+  /** 玻璃胶囊顶部内高光(亮 0.28 / 暗 0.24 白透)。 */
+  glassHighlight: 'rgba(255,255,255,0.28)',
+  /** GlassStats 顶部 inset 高光线 —— 比 glassHighlight 更强,
+   *  弥补 RN BlurView backdrop 比 web 弱 + 让数据条"顶部凸起"。 */
+  glassStatsHighlight: 'rgba(255,255,255,0.65)',
+  /** 玻璃胶囊 active 段文字 / icon 色。亮色同 primary;暗色 #FFB068
+   *  更浅一档的橙,在半透深灰玻璃上分量更轻。 */
+  glassActiveFg: '#EB6E00',
+  /** 品牌橙 active 容器底 —— TabBar active 段比 brandTint10 多 2% 视觉权重。 */
+  brandTint12: 'rgba(235,110,0,0.12)',
+
+  // Icon faint —— 跨屏"再淡一档"的灰阶图标色;暗色翻反相白 alpha 保暗底可见
+  /** Input leading/trailing icon 默认色(placeholder 风格)。 */
+  iconFaint40: 'rgba(0,0,0,0.40)',
+  /** 列表箭头 / 副 chevron。 */
+  iconFaint30: 'rgba(0,0,0,0.30)',
+  /** 空状态 / placeholder 屏巨型图标。 */
+  iconFaint25: 'rgba(0,0,0,0.25)',
+
+  /** 头像白色 ring —— Me 屏 avatar 圆环。跟 onPrimaryMuted(品牌底次主文字)区分。 */
+  avatarRing: 'rgba(255,255,255,0.6)',
+  /** Me 屏 QR / 扫码按钮背景 —— scanBtn 要在 hero 上"凸起被看到"。 */
+  qrBg: 'rgba(255,255,255,0.55)',
+
+  // Hero gradient stops —— Me 屏顶部暖橙 → 浅黄 → background 三段渐变
+  /** Hero 渐变第 1 段:暖橙起色。 */
+  heroGradient0: '#FFE3C8',
+  /** Hero 渐变第 2 段(0.55 offset):浅黄过渡。 */
+  heroGradient1: '#FFF0DD',
+  /** Hero 渐变第 3 段:接 background。亮色 = background hex,暗色 = 深暖灰收到 background。 */
+  heroGradient2: '#F5F5F5',
+
+  /** 玻璃身份胶囊背景 —— ProfileCard 玻璃 pill 浮在 warmOrange 背景上。
+   *  亮色半透浓白(暖橙背景);暗色半透薄白晕(深背景)。 */
+  glassPillBg: 'rgba(255,255,255,0.72)',
+  /** 玻璃身份胶囊边框 —— 高光描边,衬出玻璃质感。 */
+  glassPillBorder: 'rgba(255,255,255,0.9)',
+} as const;
+
+export type ColorTokens = { [K in keyof typeof lightColors]: string };
+
+export const darkColors: ColorTokens = {
+  // Brand
+  primary: '#EB6E00',
+  primaryPressed: '#D06200',
+  primaryContainer: '#3D1F00',
+  primaryContainerSubtle: '#2A1500',
+  // 暗底用纯品牌橙 + 略高 alpha 维持视觉权重(亮 10% 在暗底几乎不可见)
+  brandTint10: 'rgba(235,110,0,0.16)',
+  brandTint14: 'rgba(235,110,0,0.22)',
+  onPrimary: '#FFFFFF',
+  onPrimaryMuted: 'rgba(255,255,255,0.85)',
+
+  // Semantic
+  success: '#52C41A',
+  successContainer: '#0E2810',
+  onSuccess: '#FFFFFF',
+  error: '#FF6B40',
+  errorContainer: '#2A1010',
+  onError: '#FFFFFF',
+  info: '#5A91FF',
+  infoContainer: '#0F1A33',
+  onInfo: '#FFFFFF',
+
+  // Surface (5-layer, iOS HIG dark)
+  background: '#0A0A0A',
+  surface: '#1C1C1E',
+  surfaceContainer: '#2C2C2E',
+  surfaceContainerHigh: '#3A3A3C',
+  surfaceContainerHighest: '#48484A',
+
+  // Foreground
+  foreground: '#FFFFFF',
+  foregroundMuted: 'rgba(235,235,245,0.6)',
+  foregroundSubtle: 'rgba(235,235,245,0.3)',
+  onSurface: '#FFFFFF',
+  onSurfaceMuted: 'rgba(235,235,245,0.6)',
+
+  // Outline
+  outline: '#3A3A3C',
+  outlineVariant: '#48484A',
+  outlineFaint: 'rgba(84,84,88,0.65)',
+
+  // Inverse
+  inverseSurface: '#FFFFFF',
+  inverseOnSurface: '#000000',
+
+  // Misc
+  scrim: 'rgba(0,0,0,0.7)',
+  /** Sheet backdrop 暗色:沿用亮色同值,合规态保持浅 tint(打破暗色默认深底)让焦点
+   *  聚焦在协议 sheet 上。 */
+  sheetBackdrop: 'rgba(245,245,247,0.72)',
+  // 暗色 0.06 白透,凸起感由 glassBar 暗色黑 0.35 shadow 补
+  glassTintLight: 'rgba(255,255,255,0.06)',
+  glassSeparator: 'rgba(255,255,255,0.10)',
+  // 深灰半透 0.30,配合 blurAmount=25 让"玻璃门"语义达成
+  glassSurface: 'rgba(28,28,30,0.30)',
+  // 配合 blurAmount=15 让内容透过模糊带 alpha 染色
+  tabBarGlassTint: 'rgba(28,28,30,0.18)',
+  glassBorder: 'rgba(255,255,255,0.14)',
+  glassHighlight: 'rgba(255,255,255,0.24)',
+  glassStatsHighlight: 'rgba(255,255,255,0.10)',
+  // 浅橙,半透深灰玻璃上品牌色更亮起,视觉重量比纯品牌橙轻一档
+  glassActiveFg: '#FFB068',
+  brandTint12: 'rgba(235,110,0,0.22)',
+
+  // Icon faint —— 暗底反相成白色 alpha,数值跟亮色一致
+  iconFaint40: 'rgba(255,255,255,0.40)',
+  iconFaint30: 'rgba(255,255,255,0.30)',
+  iconFaint25: 'rgba(255,255,255,0.25)',
+
+  /** 头像白 ring 暗色:ring 改克制(几乎隐去),靠 brandAvatar 0.40 橙光晕浮起头像。 */
+  avatarRing: 'rgba(255,255,255,0.10)',
+  /** scanBtn 在暗 hero 上更显眼,比 glassTintLight 0.06 多一档。 */
+  qrBg: 'rgba(255,255,255,0.10)',
+
+  // Hero gradient stops —— 品牌橙 alpha 渐变。
+  // react-native-svg <Stop stopColor> 支持 rgba 字符串,最终 alpha = rgba.a × stopOpacity。
+  heroGradient0: 'rgba(235,110,0,0.18)',
+  heroGradient1: 'rgba(235,110,0,0.06)',
+  heroGradient2: '#0A0A0A',
+
+  /** 玻璃身份胶囊暗色:半透薄白晕浮在深暖橙 / 深底上,比亮色弱 12 倍。 */
+  glassPillBg: 'rgba(255,255,255,0.06)',
+  glassPillBorder: 'rgba(255,255,255,0.12)',
+};
+
+/** 头像品牌渐变 —— 浅橙 → 主品牌橙,135° 对角线渐变。亮 / 暗共用。 */
+export const avatarGradient = ['#F49443', '#EB6E00'] as const;

package/src/theme/index.ts

@@ -0,0 +1,33 @@
+export { lightColors, darkColors, avatarGradient } from './colors';
+export type { ColorTokens } from './colors';
+
+export { warmOrangePalette } from './palettes';
+
+export { lightShadow, darkShadow } from './shadow';
+export type { ShadowTokens } from './shadow';
+
+export { ThemeProvider, ThemeContext } from './ThemeProvider';
+export type { ColorScheme, ThemeContextValue } from './ThemeProvider';
+
+export { useTheme, useColors, useShadow } from './useTheme';
+export { useThemedStyles } from './useThemedStyles';
+export type { StylesMaker } from './useThemedStyles';
+
+export {
+  fontMono,
+  type,
+  fw,
+  space,
+  radius,
+  avatar,
+  icon,
+  control,
+  dim,
+  fixed,
+  motion,
+} from './tokens';
+
+export { blur } from './blur';
+export type { BlurIntensity } from './blur';
+
+export { r, rf } from './scale';

package/src/theme/palettes.ts

@@ -0,0 +1,23 @@
+/** Theme palettes —— 不属于 role-based ColorTokens 的"设计调色板序列"。
+ *
+ *  ColorTokens(`c.primary / c.foreground / ...`)给单一 role 命名,
+ *  亮暗各一个 hex。某些设计需要"渐变序列"或"亮暗两套相关色组",硬塞 4 个
+ *  role 进 ColorTokens 语义模糊,改放这里。
+ *
+ *  用法:
+ *  ```ts
+ *  import { useTheme, warmOrangePalette } from './';
+ *  const { scheme } = useTheme();
+ *  const stops = scheme === 'dark' ? warmOrangePalette.dark : warmOrangePalette.light;
+ *  ```
+ *
+ *  新增 palette 在这里加一项 + theme/index.ts 同步 export。
+ */
+
+/** 全屏沉浸暖橙 4 stop 渐变 —— ScreenBackdrop preset="warmOrange"。
+ *  - light:4 stop 暖橙序列(QR / 名片 / Splash 屏沉浸亮色背景)
+ *  - dark:深暖橙到黑(暗 theme 切换后仍保留橙色"温度感",底部收到 background) */
+export const warmOrangePalette = {
+  light: ['#FFE3C8', '#FFEED7', '#FFE6CA', '#FBD9B6'] as const,
+  dark: ['#1F1208', '#170D05', '#110903', '#0A0A0A'] as const,
+} as const;

package/src/theme/scale.ts

@@ -0,0 +1,24 @@
+import { Dimensions, Platform, PixelRatio } from 'react-native';
+
+/** iPhone 17 Pro 逻辑宽。所有缩放以此为基准。 */
+const DESIGN_WIDTH = 402;
+
+/** 字体 moderate 系数:0 = 不缩放,0.5 = react-native-size-matters 默认,
+ *  0.3 对中文字号最友好(避免大屏字过大、小屏字过小)。 */
+const FONT_FACTOR = 0.3;
+
+const w =
+  Platform.OS === 'web'
+    ? DESIGN_WIDTH
+    : Dimensions.get('window').width || DESIGN_WIDTH;
+
+/** 实际缩放比。 */
+const ratio = w / DESIGN_WIDTH;
+
+/** 尺寸缩放。返回值经 `PixelRatio.roundToNearestPixel` 对齐设备像素栅格,
+ *  避免 0.5px 渲染瑕疵(@3x 屏 hairline 尤其明显)。 */
+export const r = (n: number): number =>
+  PixelRatio.roundToNearestPixel(n * ratio);
+
+/** 字号 moderate 缩放。不做像素对齐 —— 字号小数点对排版有意义。 */
+export const rf = (n: number): number => n + (n * ratio - n) * FONT_FACTOR;

package/src/theme/shadow.ts

@@ -0,0 +1,164 @@
+// Themed shadow tokens —— 全仓 shadow 走这一份,callers 不再 inline 写
+// shadowColor/Offset/Opacity/Radius/elevation 5 件套。
+//
+// 暗色下中性阴影 shadowOpacity / elevation 全部置 0:视觉层次靠 surface 5 层
+// 明度差表达(layered surface 替代 shadow)。
+
+const BRAND = '#EB6E00';
+
+export const lightShadow = {
+  /** 轻提示浮起 —— Segmented active 段 */
+  subtle: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.06,
+    shadowRadius: 2,
+    elevation: 1,
+  },
+  /** 标准卡片下沉 —— Card 默认 variant */
+  card: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.08,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  /** 中性浮岛 —— TabBar 玻璃胶囊等贴底浮起,大半径柔散。 */
+  floating: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 16 },
+    shadowOpacity: 0.1,
+    shadowRadius: 40,
+    elevation: 12,
+  },
+  /** 品牌光晕 - sm —— 品牌橙浮起轻量档。 */
+  brandSm: {
+    shadowColor: BRAND,
+    shadowOffset: { width: 0, height: 6 },
+    shadowOpacity: 0.08,
+    shadowRadius: 18,
+    elevation: 3,
+  },
+  /** GlassStats 数据条专用 shadow。
+   *  顶部 `1px inset` 高光由 GlassStats topHighlight View 节点画,不进 shadow。 */
+  glassBar: {
+    shadowColor: BRAND,
+    shadowOffset: { width: 0, height: 6 },
+    shadowOpacity: 0.08,
+    shadowRadius: 18,
+    elevation: 3,
+  },
+  /** 品牌光晕 - md —— 主按钮 / Avatar ring 中等强调 */
+  brandMd: {
+    shadowColor: BRAND,
+    shadowOffset: { width: 0, height: 12 },
+    shadowOpacity: 0.26,
+    shadowRadius: 24,
+    elevation: 12,
+  },
+  /** 品牌光晕 - lg —— Login Logo halo。 */
+  brandLg: {
+    shadowColor: BRAND,
+    shadowOffset: { width: 0, height: 16 },
+    shadowOpacity: 0.22,
+    shadowRadius: 36,
+    elevation: 12,
+  },
+  /** 品牌光晕 - xl —— Splash Logo 启动屏最重浮起。 */
+  brandXl: {
+    shadowColor: BRAND,
+    shadowOffset: { width: 0, height: 20 },
+    shadowOpacity: 0.2,
+    shadowRadius: 50,
+    elevation: 12,
+  },
+  /** About icon halo —— 在 brandLg(Login Logo)和 brandXl(Splash)之间。 */
+  brandAbout: {
+    shadowColor: BRAND,
+    shadowOffset: { width: 0, height: 18 },
+    shadowOpacity: 0.28,
+    shadowRadius: 40,
+    elevation: 12,
+  },
+  /** AssistantCard 42×42 icon tile shadow —— 比 brandSm 重一档,给 hero 区品牌入口加视觉权重。 */
+  brandAssistant: {
+    shadowColor: BRAND,
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.3,
+    shadowRadius: 18,
+    elevation: 12,
+  },
+  /** Avatar 品牌橙光晕。
+   *  数值不用 r() 缩放(shadow 不跟屏宽等比)。 */
+  brandAvatar: {
+    shadowColor: BRAND,
+    shadowOffset: { width: 0, height: 10 },
+    shadowOpacity: 0.28,
+    shadowRadius: 24,
+    elevation: 12,
+  },
+  none: {
+    shadowColor: 'transparent',
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0,
+    shadowRadius: 0,
+    elevation: 0,
+  },
+} as const;
+
+export type ShadowTokens = {
+  [K in keyof typeof lightShadow]: {
+    shadowColor: string;
+    shadowOffset: { width: number; height: number };
+    shadowOpacity: number;
+    shadowRadius: number;
+    elevation: number;
+  };
+};
+
+/** 暗色统一置零 —— dark theme 用 surface 明度差替代 shadow */
+const darkZero = {
+  shadowOffset: { width: 0, height: 0 },
+  shadowOpacity: 0,
+  shadowRadius: 0,
+  elevation: 0,
+};
+
+export const darkShadow: ShadowTokens = {
+  subtle: { ...darkZero, shadowColor: '#000' },
+  card: { ...darkZero, shadowColor: '#000' },
+  /** floating 暗色不走 darkZero:浮动胶囊在暗 bg 上需要黑色 drop shadow,
+   *  否则跟暗背景贴平,视觉无层级。 */
+  floating: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 28 },
+    shadowOpacity: 0.85,
+    shadowRadius: 60,
+    elevation: 16,
+  },
+  brandSm: { ...darkZero, shadowColor: BRAND },
+  brandMd: { ...darkZero, shadowColor: BRAND },
+  brandLg: { ...darkZero, shadowColor: BRAND },
+  brandXl: { ...darkZero, shadowColor: BRAND },
+  brandAbout: { ...darkZero, shadowColor: BRAND },
+  brandAssistant: { ...darkZero, shadowColor: BRAND },
+  /** brandAvatar 暗色不置零:暗色 ring 0.10 几乎隐去,靠橙光晕(0.40 比亮色 0.28 更强)
+   *  托起头像。 */
+  brandAvatar: {
+    shadowColor: BRAND,
+    shadowOffset: { width: 0, height: 10 },
+    shadowOpacity: 0.4,
+    shadowRadius: 24,
+    elevation: 12,
+  },
+  /** glassBar 暗色不置零:黑色浮起让数据条在暗 hero 上凸起,缺它整个条贴在背景上
+   *  像没渲染。 */
+  glassBar: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 6 },
+    shadowOpacity: 0.35,
+    shadowRadius: 18,
+    elevation: 6,
+  },
+  none: { ...darkZero, shadowColor: 'transparent' },
+};

package/src/theme/tokens.ts

@@ -0,0 +1,119 @@
+import { Platform, StyleSheet } from 'react-native';
+import { r, rf } from './scale';
+
+export const fontMono = Platform.select({
+  ios: 'Menlo',
+  android: 'monospace',
+  default: 'monospace',
+});
+
+export const type = {
+  display: rf(22),
+  h1: rf(18),
+  h2: rf(17),
+  h3: rf(15),
+  body: rf(15),
+  sm: rf(14),
+  xs: rf(13),
+  xxs: rf(12),
+  micro: rf(11),
+  nano: rf(10), // TabBar/Grid/Citation/Sources 角标/小标签 10pt
+  // ── 半档微调(0.5 step,加于"近似 token + delta"反模式收敛) ──
+  /** micro(11)与 xxs(12)之间:VersionPill / profileCard / Splash / carousel 副标题。 */
+  microPlus: rf(11.5),
+  /** xs(13)与 sm(14)之间:Privacy 长文阅读字号。 */
+  xsPlus: rf(13.5),
+  /** sm(14)与 body/h3(15)之间:dashboard card 标题"小一档 semi"惯例
+   *  (NewsArea / AssistantCard / ApplicationArea 共用)。 */
+  smPlus: rf(14.5),
+  /** Hero 区主标题档(一级 brand hero,带 Logo,Login 屏)。 */
+  heroLg: rf(26),
+  /** Hero 区中等档(独立屏 + NavBar 的二级 hero,ForgotPassword)。 */
+  heroMd: rf(22),
+  /** Hero 区小档(承接式 hero,Group 选组/选角色子区)。 */
+  heroSm: rf(18),
+} as const;
+
+export const fw = {
+  regular: '400',
+  medium: '500',
+  semi: '600',
+  bold: '700',
+  heavy: '800',
+} as const;
+
+export const space = {
+  'px': r(1),
+  '1': r(4),
+  '2': r(6),
+  '3': r(8),
+  '4': r(10),
+  '5': r(12),
+  '6': r(14),
+  '7': r(16),
+  '8': r(20),
+  '9': r(24),
+  '10': r(32),
+} as const;
+
+export const radius = {
+  'xs': r(4), // Radio/Checkbox/Tag/Citation 内圈 4pt
+  'sm': r(6),
+  'md': r(8),
+  'lg': r(10),
+  'xl': r(12),
+  '2xl': r(14),
+  '3xl': r(18),
+  'pill': 999, // big-enough sentinel,不缩放
+} as const;
+
+/** 头像容器尺寸阶梯:xs=18 列表 / sm=28 二级 / md=32 默认 / lg=40 卡片 / xl=56 hero。 */
+export const avatar = {
+  xs: r(18),
+  sm: r(28),
+  md: r(32),
+  lg: r(40),
+  xl: r(56),
+} as const;
+
+/** 图标盒尺寸阶梯(IconBox / 浅色 bg + 中心 icon)。
+ *  icon['2xl'] 与 avatar.xl 同值但语义不同(图标 vs 头像),业务按语义选不要混用。 */
+export const icon = {
+  'xs': r(18),
+  'sm': r(22),
+  'md': r(26),
+  'lg': r(30),
+  'xl': r(36),
+  '2xl': r(56),
+} as const;
+
+/** 控件高度阶梯(Button / Stepper / Input / Segmented 通用)。
+ *  lg 44 数值与 fixed.hitTarget 一致,但 lg 是 scaled / hitTarget 是物理常量,语义不同
+ *  不要合用。 */
+export const control = {
+  sm: r(28),
+  md: r(36),
+  lg: r(44),
+} as const;
+
+/** 散尺寸 —— 未归到 avatar/icon/control 阶梯的单点常量。 */
+export const dim = {
+  /** 发送按钮 32px —— chat PromptInput / 主送出按钮专用,与 avatar.md 同值 */
+  sendBtn: r(32),
+} as const;
+
+/** 物理常量表 —— **不**参与缩放,在任何设备上保持同一物理尺寸。
+ *  iOS HIG 要求触控目标 ≥44pt 物理。 */
+export const fixed = {
+  hitTarget: 44,
+  navbarH: 44,
+  tabbarH: 50,
+  hairline: StyleSheet.hairlineWidth,
+} as const;
+
+export const motion = {
+  fast: 150,
+  base: 200,
+  slow: 300,
+  pulse: 1600,
+} as const;

package/src/theme/useTheme.ts

@@ -0,0 +1,23 @@
+import { useContext } from 'react';
+import { ThemeContext, type ThemeContextValue } from './ThemeProvider';
+import { lightColors } from './colors';
+import { lightShadow } from './shadow';
+
+const FALLBACK: ThemeContextValue = {
+  scheme: 'light',
+  colors: lightColors,
+  shadow: lightShadow,
+};
+
+export function useTheme(): ThemeContextValue {
+  const ctx = useContext(ThemeContext);
+  return ctx ?? FALLBACK;
+}
+
+export function useColors() {
+  return useTheme().colors;
+}
+
+export function useShadow() {
+  return useTheme().shadow;
+}

package/src/theme/useThemedStyles.ts

@@ -0,0 +1,28 @@
+import { useMemo } from 'react';
+import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
+import type { ColorTokens } from './colors';
+import type { ShadowTokens } from './shadow';
+import { useTheme } from './useTheme';
+
+/** RN 0.85 strict-api 不再导出 `StyleSheet.NamedStyles`,这里本地保留同名约束:
+ *  `{ [k]: ViewStyle | TextStyle | ImageStyle }` —— 给 maker 返回值兜底。 */
+type NamedStyles<T> = { [P in keyof T]: ViewStyle | TextStyle | ImageStyle };
+
+export type StylesMaker<S extends NamedStyles<S>> = (
+  c: ColorTokens,
+  s: ShadowTokens
+) => S;
+
+/**
+ * 接收 (colors, shadow) => StyleSheet 工厂,返回当前主题对应的 themed StyleSheet。
+ *
+ * 缓存依赖 [colors, shadow, maker]。`maker` 必须定义在模块顶层(不要写在组件内联),
+ * 否则引用每次变,缓存失效。ThemeProvider 通过 useMemo([scheme]) 保证主题不变时
+ * colors / shadow 引用稳定。
+ */
+export function useThemedStyles<S extends NamedStyles<S>>(
+  maker: StylesMaker<S>
+): S {
+  const { colors, shadow } = useTheme();
+  return useMemo(() => maker(colors, shadow), [colors, shadow, maker]);
+}

package/src/utils/logger/index.ts

@@ -0,0 +1,9 @@
+export {
+  createLogger,
+  setLogLevel,
+  getLogLevel,
+  addTransport,
+  removeTransport,
+} from './logger';
+export type { LogLevel, LogRecord, LogTransport, Logger } from './types';
+export { consoleTransport } from './transports/console';

package/src/utils/logger/logger.ts

@@ -0,0 +1,69 @@
+import { consoleTransport } from './transports/console';
+import type { LogLevel, LogRecord, LogTransport, Logger } from './types';
+
+const LEVEL_RANK: Record<LogLevel, number> = {
+  debug: 10,
+  info: 20,
+  warn: 30,
+  error: 40,
+};
+
+const state = {
+  level: (typeof __DEV__ !== 'undefined' && __DEV__
+    ? 'debug'
+    : 'warn') as LogLevel,
+  transports: [consoleTransport] as LogTransport[],
+};
+
+function emit(
+  level: LogLevel,
+  scope: string,
+  message: string,
+  args: unknown[]
+): void {
+  if (LEVEL_RANK[level] < LEVEL_RANK[state.level]) return;
+  const record: LogRecord = {
+    level,
+    scope,
+    message,
+    args,
+    ts: Date.now(),
+  };
+  for (const t of state.transports) {
+    try {
+      t.log(record);
+    } catch {
+      /* transport 异常隔离:绝不影响业务调用 */
+    }
+  }
+}
+
+export function createLogger(scope: string): Logger {
+  return {
+    debug: (message: string, ...args: unknown[]) =>
+      emit('debug', scope, message, args),
+    info: (message: string, ...args: unknown[]) =>
+      emit('info', scope, message, args),
+    warn: (message: string, ...args: unknown[]) =>
+      emit('warn', scope, message, args),
+    error: (message: string, ...args: unknown[]) =>
+      emit('error', scope, message, args),
+  };
+}
+
+export function setLogLevel(level: LogLevel): void {
+  state.level = level;
+}
+
+export function getLogLevel(): LogLevel {
+  return state.level;
+}
+
+export function addTransport(t: LogTransport): void {
+  removeTransport(t.id);
+  state.transports.push(t);
+}
+
+export function removeTransport(id: string): void {
+  state.transports = state.transports.filter((t) => t.id !== id);
+}