Otter 样式词典

此软件包是 Otter 框架模块。 。 。 .

说明

这个软件包暴露了一组 钩子 财务报告和审定财务报表 模块 联 合 国 样式词典 提高Tokens设计的能力.

开始

准备你的 样式词典 感谢命令:

ng add @ama-styling/style-dictionary

默认情况下, 命令会进行以下更新 :

• 将 dev 依赖添加到 样式词典包。 。 。 .
• 创建最小值 配置( mjs) cSS和元数据生成所需的配置文件.
• 添加数据 generate:theme 财务报告和审定财务报表 generate:metadata 项目中的脚本 软件包.json。 。 。 .

然后您就可以根据您的项目规格定制此设置 :

• 自定义 样式词典配置 在生成时 配置( mjs) 文档.
• 添加 扩展 通过 增强机制。 。 。 .
• 配置输出文件 getTargetFiles 帮助者。 。 。 .

增强

设计托肯扩展

这个 设计托肯斯 格式允许提供 $extensions 属性来增强它应用的托肯.
财产可直接适用于Token:

// colors.token.json
{
  "colors": {
    "primary": {
      "$value": "#000000",
      "$extensions": {
        "o3rPrivate": true
      }
    }
  }
}

或在一个专用 .extensions.json 文件( 当 ama/json-parser/扩展 解析器已装入 :

// color.token.json
{
  "colors": {
    "primary": {
      "$value": "#000000"
    }
  }
}

// custom.extensions.json
{
  "colors.primary": {
    "$description": "Primary private color",
    "$extensions": {
      "o3rPrivate": true
    }
  }
}

可用的 Otter 扩展

[尖叫声] 这个 需要的钩子 需要注册到 样式词典配置 以充分支持延期.

模块

解析器

预处理器

变换

变形组

格式

登记程序

不同的钩/模块可以通过不同的钩/模块单独注册 注册... () 从 StyleDictionary 或全部同时与 register 函数如下:

import { register, baseConfig } from '@ama-styling/style-dictionary';

const sd = new StyleDictionary({
  ...baseConfig,
  // custom configs ...
});

register(sd); // Register all Otter modules

[大 为了能够使用任何所列模块/套接字,它们必须登记在 StyleDefinition 举个例子.

[TIP] 帮手 baseConfig 将为Otter扩展支持提供最小配置.

帮助者

增强和便利《公约》的配置 StyleDictionary 实例 @ama-styling/style-dictionary 揭露出一批帮手.

获取目标文件

这个 getTargetFiles 函数用于参数化基于 Design Token 生成的文件(遵循与 $extensions:

// Example to generate the `color-primary-**` variables in `my-color-primary.css`

import { getTargetFiles } from '@ama-styling/style-dictionary';

const rule = {
  'color.primary': 'my-color-primary.css'
};

// or `const rule = {color: {primary: 'my-color-primary.css'}}`
// or `const rule = {'color.primary': {$extensions: {o3rTargetFile: 'my-color-primary.css'}}}`
// or `const rule = {'color: {primary': {$extensions: {o3rTargetFile: 'my-color-primary.css'}}}}`

const sd = new StyleDictionary({
  //...
  plateforms: {
    css: {
      files: [
        ...getTargetFiles({ rule, { format: 'css', defaultFile: 'default-file.css' } })
      ]
    }
  }
});

register(sd); // Register all Otter modules

[注] 这个 format 选项将应用到提供给 getTargetFiles 函数(包括 defaultFile) (中文(简体) ). defaultFile 定义生成不匹配任何规则的变量的默认文件.

帮助函数 getTargetFiles 正在将过滤器注册到 StyleDictionary 带着独一无二的身份证.
此ID可检索如下:

import { getTargetFiles } from '@ama-styling/style-dictionary';

const sd = new StyleDictionary();
const files = getTargetFiles({ rules, { styleDictionary: sd } });

/**
 * Filter IDs registered in {@link sd} Style Dictionary instance
 * @type {string[]}
 **/
const filterIds = files.map(({ filter }) => filter);

高级

基本节点配置示例

// style-builder.mjs

import { register, getTargetFiles, baseConfiguration } from '@ama-styling/style-dictionary';
import StyleDictionary from 'style-dictionary';

// Rules to generate different CSS files according to Token name
const fileRules = {
  colors: 'style/colors.tokens.css',
  'components.panel': 'components/panel/panel.tokens.css'
}

const sd = new StyleDictionary({
  ...baseConfiguration, // Use basic Otter configuration setup
  usesDtcg: true, // Use Design Token Standard format

  source: ['tokens/*.tokens.json'], // Design Token files
  include: ['token.extensions.json'], // Custom extensions

  platforms: {
    // Generate CSS Files
    css: {
      options: {
        outputReferences: true // to output `--var: var(--other-var)` instead of the value of `--other-var`
      },
      transformGroup: 'ama/css/recommended',
      files: [
        ...getTargetFiles(fileRules, { format: 'css' }),
        // default CSS file where generate variables
        { destination: 'style/default.tokens.css', format: 'css' }
      ]
    },
    cms: {
      options: {
        outputReferences: true
      },
      transformGroup: 'ama/css/recommended',
      files: [
        { destination: 'style.metadata.json', format: 'ama/json/metadata' }
      ]
    }
  }
});

// Register otter hooks/modules
register(sd);

if (process.env.CSS_ONLY){
  sd.buildPlatform('css');
} else {
  sd.buildAllPlatforms();
}

可用以下命令运行 :

node ./style-builder.mjs