@ design- parity/ catalog- 导出

转出一个完成的作曲 组件系统 可导入 设计艺术 目录 ——代码 设计-工具方向 设计-平等.

其余设计均等证明 公关与设计是等同的 软件包走另一条路:它需要整个组件系统(组成 M3, 穿戴) 由上游制成 M3, 闪光, 闪光,.. compose-preview CLI,还有 它是一个 标签页 设计者可以导入到Figma,Google Stitch,或者 克劳德设计公司.

输油管是 代码引导: 每个值来自渲染器自己的数据 产品,所以目录通过构建是正确的. 已出版设计包 种子/仅参考——见 docs/design-artifacts/REFERENCE_KITS.md。 。 。 .

产生的东西

对于每个组件,按其主模式(状态×主题×大小):

• 两个变体 - 那个 ideal 制作(捕获PNG)和 layout 转让 compose/semantics-wireframe 边框视图, 因此绑定/ 空白 / 结构可见).
• 绿线层 - 以下列内容为根据的无障碍说明: 问题 绿线来自渲染器的 a11y / 对比 / i18n 发现,以及 info 光谱 记录每个交互式节点作用并测量的绿线 触控目标大小.
• 红线层 ——布局间距谱:每个有几何特征的节点,其 框加内容 padding间槽 gap (单位:千美元)Arrangement.spacedBy),以及 角半径——所以一个组件及其槽每个带可导入的框 + 间隔,不只是一张相片。 (去掉语义树,所以没有) 语义学——装饰性图标——没有框;全插槽覆盖是一个 渲染器侧后继. )
• 符号集 - 系统解决了 colors 编号 : typography 编号 : radius (形状),出口为W3C 技术合作组 文件加一个 图集变量 投影(浅/暗作为模式).
• 来源身份 - 每一个构象都保留了完全合格的构图 previewId 这导致了它。 这是每个图像, 所以单独的光/暗或 状态预览仍可通过机器解析 design-map.json 即使当 该目录使用更友好的组件 id.

磁盘捆绑是超级组合 @design-parity/adapter-bundle manifest.json,所以通过平分流返回目录.

使用

import {
  buildCatalog,
  writeCatalog,
  type ComponentSource,
} from "@design-parity/catalog-export";

// `sources` are normalized via @design-parity/candidate's data-product mappers
// (nativeFindings, semanticsToSemanticTree, composeThemeToTokens).
const catalog = buildCatalog(
  { system: "compose-m3", title: "Compose Material 3" },
  sources satisfies ComponentSource[],
);

await writeCatalog(catalog, ".design-artifacts/compose-m3", {
  sourceRoot: "build/compose-previews",
});

输出 :

catalog.json            # the index: provenance, components, variants, greenlines
tokens.dtcg.json        # the system token set (W3C DTCG)
themes/<theme>.dtcg.json # one per alternate named theme, when the system declares any
figma-variables.json    # Figma variable-collection projection
images/<component>/<variant>__<state>[__theme][__size].png

备选主题

tokens.dtcg.json 这是 系统 符号集: 解决的主题 贴纸在下面 宣布交替主题的系统——作曲 @ThemeCatalog 编号 : @WearThemeCatalog 提供方 (Brand Light, 高对比度, a) 守望相机的夜间调色板)——有多个相机,它们完全不同於: 符号集描述的方式: 颜色, 也常常是类型面, 因为主题是 自由交换类型缩放.

传为 buildCatalog第四个论据(或 catalogFromCandidates' themes 选项),每个选项都作为自己的 DTCG 文件在 themes/列表 在仪表上

"tokensFile": "tokens.dtcg.json",        // still the system token set
"themes": [
  {
    "id": "com.example.BrandDarkThemeCatalog",  // the provider FQN
    "name": "Brand Dark",
    "dark": true,
    "tokensFile": "themes/com.example.branddarkthemecatalog.dtcg.json"
  }
]

他们是 从不解开 路边 themeTokens 编号: a 组件的语义性记录了它提供的一个主题,所以 发电机——它知道哪一个部件属于哪个申报的主题——用品 他们。 这包括: dark: 生成器持有由渲染器组成的表面 每一个标本,所以它回答一次在这里 而不是让每个消费者 把它从调色板上弄出来 并不同意。 缺席 不详不轻。 空的代号或空的指针集的主题被丢弃而不是 作为消费者可以选择和找到的东西 后面什么都没有,以及 重复的 id 保留它的第一个条目.

这个 id 是提供商FQN,因为这是预览服务器的 ?theme=theme:<providerFqn> 深度链接已经命名, 这样消费者就可以加入 页面显示的主题的这些符号没有第二次映射。 这是 任何想要显示主题的东西 实值 而不是所谓的——一个用主题本身的颜色所绘取的芯片 和打字机,每组主题图像变量模式,每组图像的对比性审计 以系统船为主题——需要指使符,重新交付以收回它们就是 这种导出是用来避免的 .

figma-variables.json 保留投影 系统 仅设定符号 : 风扇每个主题是一个变量 -模式 由进口商回答的问题, 这里没人能猜到.

版式

仅取决于 @design-parity/core。 。 。 .

平等判决parity/findings.json(中文(简体) )

上面的注解层 说每一边 实值。还需要进行比较 跑这么快 结 论 - 标签一旦本地化, 粘贴是 24,spec声称16, 这两条框架从不可比——和 注释和视觉分数都无法得出:注释报告 以及一个百分比移动 相同,用于补丁变化和颜色变化.

这么说吧 parityFindings.ts 运行项目 Verdict进入 compose-preview-parity-findings/v1,以 id 键入预览服务器路径 与每项判决相对照并按参照范围进行. writeCatalog 来电者过后写下 parityFindings - 一个简单的贴纸表导出 没有判决,没有写作, 和运行,它的组件全部 通过了.

有趣的是,这一半 锚:一个发现必须说它在哪里,在 每个面板的自有像素空间,或者服务器只能将其打印为道具. 调查结果 上面没有几何图案,所以它从已经消失的树上取回—— 所测量的复选框(detail.bounds,该a11y检查发出)作为 状态; a detail.label 用标签与每棵树匹配, 相同的匹配 @design-parity/report-html上面刻着 而不是一秒钟 可能不同意的规则 token 寻找每棵树的锚 根框,因为这是索赔的范围。 其他的都无锚 并读作传言——指错内容的突出点比 没有,因为读者没有办法告诉.

注释层和他们所许下的诺言

比较页画出两个附加说明的栏目——渲染(previews)和 设计参考references)——从同出行相去相去相去 两种标签在规格上是不同的,而不是在每一边是如何的 测量。 两个属性都保持这个真实性,两者都可见于输出中:

• 单位. 裁决 dp编号 :sp; 设计会报告自己的像素. 一棵树,背着一棵 density (source px per dp) 转换为代码的 单位,以及 detail 记录 density + 键 sourceUnit 所以原始号码是 可收回来。 无密度的一棵树有它自己的单位命名(text 52.5px(中文(简体) ) 而不是猜测——引用一款3×板的像素为: sp 将发明一种 3个差异.
• 证相. 间距来源 已声明 是一个Spec。 间距测量 儿童几何——手放(非自发放出)设计框架如何实现 排版层 – 是观测, 前缀 ≈ 标签和标签 detail.spacingSource = "derived"。 。 。 .