Skip to content

主题系统

app/src/main/java/com/joker/kit/core/designsystem/theme 管理脚手架的颜色、Typography、圆角与布局尺寸。虽然实现沿用 MaterialTheme + Compose 的动态能力,但全部参数都来源于自定义的色彩/文字/按钮/布局规范,目的是让视觉风格符合国内项目习惯,而不是完全照搬 MD3。

设计来源

主题实现参考了四张规范图:

  1. 色彩规范
  2. 字体规范
  3. 按钮规范
  4. 布局规范

下面逐项说明它们与代码的对应关系。

色彩规范(Color.kt

色彩规范

  • Color.kt 定义了品牌主色 PrimaryLight / PrimaryDark、状态色(ColorDangerColorWarningColorSuccess 等)以及配套的深色模式值。
  • 文本颜色按“主/次/辅助/禁用”区分,如 TextPrimaryLightTextSecondaryLight,同时提供 TextPrimaryDark 等深色模式颜色。
  • 背景、蒙层、分割线等辅助色也在这里统一管理,Theme.kt 会将这些值注入 lightColorScheme / darkColorScheme

字体规范(Type.kt

文字规范

  • 设计稿提供了 22sp、18sp、16sp、14sp、12sp 等字号和对应行高,Type.kt 通过 Typography 将它们映射到 display*headline*title*body*label* 等 Compose 名称。
  • 行高大多是字号的两倍,适合中文段落阅读;调用 MaterialTheme.typography.xxx 即可获得这些样式。

按钮规范(设计稿参考)

按钮规范

  • 按钮的宽高、字号、圆角与状态色全部来自此图。虽然当前 designsystem 还未封装具体的 AppButton,但相关常量已经在 Color.ktType.ktShape.ktSize.kt 中准备完毕。
  • 例如:小按钮/普通按钮的 28sp/32sp 字号来自 Type.kt,圆角来自 Shape.kt 的 12dp/16dp,内边距/高度可复用 SpacePadding* 等常量。编写按钮时直接引用这些数值即可保持一致。

布局规范(Size.kt

布局规范

  • Size.kt 将垂直/水平间距(32/24/16/12/8/4dp)转换为 SpaceVerticalXXLargeSpaceHorizontalMedium 等命名常量。
  • 内边距(SpacePaddingLarge/Medium/Small)、分割线(SpaceDivider 0.5dp)、指示器(SpaceIndicator 2dp)也在这里定义,component 层会直接引用。

间距如何调用

  • 在页面需要“占位”式间距时,直接调用 com.joker.kit.core.designsystem.component.Spacer.kt 中的函数,例如 SpaceVerticalMedium()SpaceHorizontalSmall(),内部会自动引用对应的 Size.kt 常量。
  • 如果是设置 paddingArrangement.spacedBy() 等参数,则直接使用 SpacePaddingLargeSpaceHorizontalMedium 这些常量,保证所有页面的间距来源一致。

圆角规范(Shape.kt

  • 依据设计稿的按钮与卡片风格,定义了 4/8/12/16/24dp 五档圆角(RadiusXSmall ~ RadiusExtraLarge)以及对应的 RoundedCornerShape
  • AppShapes 将这些圆角注入 MaterialTheme.shapes,按钮、卡片、弹窗等可直接使用 ShapeSmallShapeMediumShapeExtraLarge

如何扩展

  • 如果设计更新了颜色或字号,修改 Color.ktType.kt 并同步 Theme.kt 即可。
  • 新的按钮规格或间距,先更新规范图,再在 Size.kt / Shape.kt 中补充常量,最后让组件封装统一引用。
  • 记得避免在业务层写魔法数,统一复用这些主题常量,才能在需要换肤或调优时快速落地。