阿尔托·托肯斯
概览
@alto-avios/alto-tokens软件包包含了IAGL的设计令牌,使用"样式词典"来生成,以确保网络和应用开发的应用程序的风格一致.
此软件包包括预建的可以轻松地被集成到您的项目中的符号,同时支持使用"样式词典"的转换,过滤和输出格式. 生成的令牌在构建后被放入 dist/alto-tokens 文件夹中.
地方发展
先决条件
在设置项目之前, 请确保您在本地机器上安装以下设备 :
- 节点.js:v20.11.1(根据建议)
- 国家预防机制: 随节点而来
- 数字: (可选,但建议管理节点版本)
构建托肯
要建立符号,请使用以下命令:
npm run build:tokens
样式词典
我们正在使用"样式词典"v4处理设计符号的转换和生成. 此外,我们利用@tokens-studio/sd-transforms软件包进行高级改造.
关于如何与"样式词典"合作的更多信息,请参考他们的文档.
项目结构
utils/: 存储自定义配置、转换、过滤和格式的文件夹.
dist/: 在构建过程后将生成的令牌放入的分发文件夹 .
raw-tokens/: 从 figma 输出的 json 文件 .
安装
要安装软件包, 请运行
npm i @alto-avios/alto-tokens
您的新生成的令牌可以在名为 : /dist
字体
每个品牌都有一个字体.css文件,包含品牌特有字体面定义. 您可以直接将该文件导入到您的 React 或 Next.js 应用程序,为每个品牌应用正确的字体.
要在您的工程中使用品牌字体:
-
请确保您已安装@alto-avios/alto-tokens.
-
导入您需要的品牌的字体. cs 文件 :
// Example for "aer-lingus" brand in a React component
import '@alto-avios/alto-tokens/web/aer-lingus/fonts.css';
将"aer-lingus"替换为所期望的品牌,如"British-airways","vueling"等.
请求 CORS 访问
若您正在将这些资源用于我们国家遥感组织政策目前不允许的域, 请联系我们请求访问。 提供需要访问的确切域或子域(例如, https://storybook.design.dev.iagl.dignal (中文(中国大陆) ) 或者说 https://stg.iagl. 数码) (中文(简体) ). 我们将在S3 CORS政策中增加这些领域,以确保无缝整合.
更新
检查是否有更新 :
npm outdated
如果有更新,则更新软件包:
npm update @alto-avios/alto-tokens
许可证
本项目的许可条件如下: 麻省理工学院许可证。 。 。 .