奥罗设计托肯斯
安装
$ npm i @alaskaairux/design-tokens
使用预处理的资源
位于 ./dist/tokens 目录 无。 。 。 .
└── tokens
├── CSSCustomProperties.css
├── CSSCustomPropertiesColorRGB.css
├── CSSOpacityProperties.scss
├── CSSSizeCustomProperties.css
├── JSData--color.js
├── JSObject--allTokens.js
├── JSObject--deprecated.js
├── JSVariables--color.js
├── SCSSOpacityVariables.scss
├── SCSSVariableMap.scss
├── SCSSVariables.scss
├── SCSSVariablesMapFlat.scss
├── SassCustomProperties.scss
├── SassCustomPropertiesColorRGB.scss
└── SassSizeCustomProperties.scss
资源描述
| 文件 | 语法 | 类型 | 状态 | 过滤器类型/ 描述 |
|---|---|---|---|---|
| CSSCustom 财产 | 支助科 | 自定义属性 | 当前 | v3.0x 发行符的全部列表 |
| CSSCustom Properties ColorRGB (英语) | 支助科 | 自定义属性 | 当前 | 过滤器:颜色, 公开 自定义 RGB 输出 |
| 坐标 属性 | 萨斯 | 自定义属性 | 当前 | 过滤器: 不透明 |
| CSS Size 海关财产 | 支助科 | 自定义属性 | 当前 | 过滤器:大小, 公用 |
| JSData- 颜色 | 联合来文单元 | 颜色数据 | 当前 | 过滤器: 颜色, 当前 |
| JS 目标受损 | 联合来文单元 | 贬值的令牌 | 当前 | 过滤器:已贬值、阴性 |
| JS 目标-所有托肯斯.js | 联合来文单元 | 所有数据 | 当前 | 过滤器: 公用 |
| JSVariables - 颜色 | js es6 (英语) | 颜色数据 | 当前 | 过滤器: 颜色 |
| SCS平和度 变量 | 萨斯 | Sass 变量 | 当前 | 过滤器: 不透明 |
| SCSS 可变映射 | 萨斯 | Sass 可变地图 | 当前 | 过滤器:大小, 公用 |
| SCSS 变量 | 缩写 | Sass 变量 | 当前 | v3.0x 发行符的全部列表 |
| SCSS 变量映射Flat | 缩写 | Scs 变量映射 | 当前 | v3.0x 发行符的全部列表 |
| 海关财产 | 缩写 | 自定义属性 | 当前 | v3.0x 发行符的全部列表 |
| SassCustom Properties ColorRGB 软件 | 萨斯 | 自定义属性 | 当前 | 过滤器:颜色, 公开 自定义 RGB 输出 |
| SassSize海关财产 | 萨斯 | 自定义属性 | 当前 | 过滤器:大小, 公用 |
用 Sass 安装
@import "~@alaskaairux/design-tokens/dist/tokens/SCSSVariables";
// or
@import "~@alaskaairux/design-tokens/dist/tokens/SassCustomProperties";
安装 CSS
通过React或类似的框架,CSS文件可以直接从npm导入:
import "@alaskaairux/design-tokens/dist/tokens/CSSCustomProperties.css"
对于其他框架,建议将CSS文件从npm复制到项目范围,并有构建设想.
安装无害环境管理
在网络包装的应用程序或 type="module" 脚本 :
import { AuroColorAlertNotificationOnLight, AuroColorBorderErrorOnLight } from '@alaskaairux/design-tokens/dist/tokens/JSVariables--color.js';
从 CDN 安装
使用unpkg.com,Dist目录中的每个文件都可以访问.
<link rel="stylesheet" href="https://unpkg.com/@alaskaairux/design-tokens@latest/dist/tokens/CSSCustomProperties.css">
具体来说,CSSCustomProperties.css文件,有更快的CDN资源可用.
<link rel="stylesheet" href="https://p2pcontent-fd-prod.azurefd.net/auro/tokens/CSSCustomProperties.css">