VA 移动设计系统 - Tokens 套件
Tokens软件包包含了VA移动设计库的设计符. 用这个 样式词典 作为构建系统,在JSON中定义我们的风格并导出到不同的格式.
消费者
直接消耗指使包是可选的,但建议使用. 指使套件包含用于构建设计系统组件的同一组构件,这些构件将更方便地允许屏幕内容和应用程序级自定义组件遵循设计系统的惯例,有助于保持用户经验的一致性. 还建议将符号包版本与您所利用的组件包所使用的符号版本相匹配,以确保一致性.
调用
简单地说,使用符号:
- 添加
@department-of-veterans-affairs/mobile-tokens通过您的软件包管理器( 如纱线) 到您的项目 - 添加
import { colors } from '@department-of-veterans-affairs/mobile-tokens用于您想要使用的文件. - 代码中的参考颜色: 例如.
buttonColor = colors.vadsColorGrayMedium
主题
指使套件中也有光和暗的主题可用. 这些主题属于 colors 上面的符号,包含原始颜色,语义符号,没有 OnLight 或者说 OnDark 模式,以及仅指定浅色或暗色主题的颜色。 这个 OnLight 财务报告和审定财务报表 OnDark 模式后缀也被删除.
主题的目的是允许指定色彩符而无需指定光或暗模式,让您的主题提供者或处理者返回正确的主题. 举例来说: 与其附带条件,不如指定 colors.vadsColorForegroundDefaultOnLight 或者说 colors.vadsColorForegroundDefaultOnDark 符号,您可以使用 theme.vadsColorForegroundDefault 如果您的应用程序已经知道它想要使用的颜色方案 .
直接使用主题符号
- 添加
@department-of-veterans-affairs/mobile-tokens通过您的软件包管理器( 如纱线) 到您的项目 - 添加
import { themes } from '@department-of-veterans-affairs/mobile-tokens用于您想要使用的文件. - 在代码中引用主题使用任意一种
themes.light或者说themes.dark
使用主题钩
我们还在组件库中提供了一个钩子,它将根据用户的OS设置返回适当的光或暗主题. 用钩:
- 添加
@department-of-veterans-affairs/mobile-component-library通过您的软件包管理器( 如纱线) 到您的项目 - 添加
import { useTheme } from '@department-of-veterans-affairs/mobile-component-library' - 根据设备当前配色方案,用钩子来获取光或暗的主题。 譬如说.
const theme = useTheme()
const componentStyle = {
color: theme.vadsColorForegroundDefault,
}
捐助者
根据捐款情况,关于如何开展工作的建议有所不同.
如果您正在对已有的符号进行简单的添加或更新,建议这样做 gitHub 网页界面中 通过更新相关的 src 令牌文件和 运行针对软件包分支的 alpha 发布 申明: dist/ 文件夹如预期的那样正确排列您的更新/添加符号 国家防范机制一揽子计划。 。 。 .
如果您正在贡献许多符号或者需要调整构建进程,您应该在当地设置. 见 组件包文档中的方向 修改将目录更改为符号包的过程(va-mobile-library/packages/tokens)而不是组件,没有最后运行步骤作为 tokens:build 命令基本上是在运行符号,因为它根据构建/配置设置和符号生成输出文件夹 src/ 文件夹.
注意: 文件夹结构和文件命名 src/ 文件夹具有相关性,因此遵循现有结构和直接问题到 dSVA Slack 频道。 。 。 .
Yarn 命令
| 命令 | 说明 |
|---|---|
tokens:build | 将 JSON 文件在 src/tokens 文件夹,并按 config.js |