奥罗设计托肯斯
概览
奥罗设计 Tokens是Auro设计系统的基础,为不同平台和执行提供了一致的设计价值. 这些标志为阿拉斯加航空公司和夏威夷航空公司品牌定义了颜色,打字,间隔等视觉属性.
安装
npm install @aurodesignsystem/design-tokens
快速启动
CSS 自定义属性
对于大多数网络应用程序,建议使用 CSS 自定义属性:
// In a React or similar application
import "@aurodesignsystem/design-tokens/dist/themes/alaska/CSSCustomProperties--alaska.css"
<!-- In an HTML file -->
<link rel="stylesheet" href="node_modules/@aurodesignsystem/design-tokens/dist/themes/alaska/CSSCustomProperties--alaska.css">
与萨斯
在与萨斯合作时:
@import "~@aurodesignsystem/design-tokens/dist/themes/alaska/primitives--alaska.scss";
Java 脚本使用法
import { AuroColorAlertNotificationOnLight } from '@aurodesignsystem/design-tokens/dist/legacy/auro-classic/JSVariables--color.js';
可用主题
奥罗设计 Tokens 支持多个主题:
| 主题 | 说明 | 使用量 |
|---|---|---|
| 阿拉斯加语Name | 目前阿拉斯加航空主题 | 阿拉斯加航空公司品牌接口 |
| 阿拉斯加经典 | 带有 Auro 经典值但最新符号名的过渡主题 | 仅针对移徙情况 |
| 阿摩斯语Name | 当前 Atmos 主题 | Atmos 品牌接口 |
| 夏威夷语 | 夏威夷航空主题 | 夏威夷航空公司品牌接口 |
| 奥罗经典 | 遗产主题(被贬) | 仅用于后向兼容 |
应用主题
使用 data-aag-theme 属性。 所有的孩子元素都会继承主题的设计符号.
<html data-aag-theme="aag-theme-as">
<!-- All content uses Alaska theme tokens -->
</html>
可用的主题代码 :
| 主题 | 属性值 |
|---|---|
| 阿拉斯加语Name | aag-theme-as |
| 阿拉斯加经典 | aag-theme-asc |
| 夏威夷语 | aag-theme-ha |
| 阿摩斯语Name | aag-theme-atm |
嵌入式主题
通过应用不同的主题可以嵌入主题 data-aag-theme 值到儿童元素。 子及其后人会使用被巢被子的主题的符号,而其余页面保留了母主题.
<html data-aag-theme="aag-theme-as">
<!-- Alaska theme -->
<header>...</header>
<section data-aag-theme="aag-theme-ha">
<!-- Hawaiian theme within this section only -->
<p>This content uses Hawaiian tokens.</p>
</section>
<!-- Back to Alaska theme -->
<footer>...</footer>
</html>
部分主题覆盖( 只有颜色或类型)
主题被分割成 颜色 财务报告和审定财务报表 打印 象征团体。 您可以应用一个主题的一个方面而不通过附加来影响另一个方面 -color 或者说 -type 到属性值.
纯色覆盖
在保留父主题打字时应用主题的颜色符号 :
<html data-aag-theme="aag-theme-as">
<!-- Alaska color + Alaska typography -->
<section data-aag-theme="aag-theme-ha-color">
<!-- Hawaiian colors, but still Alaska typography -->
<p>Hawaiian color palette with Alaska fonts.</p>
</section>
</html>
仅限字法的覆盖
在保留父主题颜色的同时应用主题的打字符 :
<html data-aag-theme="aag-theme-as">
<!-- Alaska color + Alaska typography -->
<section data-aag-theme="aag-theme-ha-type">
<!-- Hawaiian typography, but still Alaska colors -->
<p>Hawaiian fonts with Alaska color palette.</p>
</section>
</html>
合并部分覆盖
您可以将部分选择器堆放在同一元素上, 从一个主题混合颜色, 从另一个主题混合打印 :
<html data-aag-theme="aag-theme-as">
<section data-aag-theme="aag-theme-ha-color">
<div data-aag-theme="aag-theme-atm-type">
<!-- Hawaiian colors + Atmos typography -->
</div>
</section>
</html>
文档
关于综合文件,请见我们:
软件包结构
Npm 软件包在 ./dist/ 按主题排列的目录.
捐款
请读我们的 提供指南 详细介绍我们的行为守则和提交拉动请求的程序.
许可证
该项目根据Apache 2.0许可证颁发许可——见 自由主义 详细文件.