@ design- parity/ diff (英语)

来源不可知的diff引擎. 假设a (DesignReference, CandidateRender) 配对——来自任何适配器和候选的渲染器,并发射定型器 Verdict、减记摘要和 参考/candidate/diff 每个图像的三进制.

人数 文件/文件: 引擎运行 仅限 承诺、决定性规则/配置——运行时无模式呼叫,则 判决 a11y + i18n 的线索,然后表示遵守,然后原始视觉 d.

使用

import { diff } from "@design-parity/diff";

const { verdict, summary, triptychs } = await diff(reference, candidate, {
  repoRoot,          // image `uri`s resolve against this (default: cwd)
  outDir: "out",     // optional: write triptych-<key>.png here
  // config: { spacingTolerance: 0, pixelThreshold: 0.05, ... },
  // checksConfig: { contrastLevel: "AAA" },  // a11y/i18n thresholds
  // checks: myProvider,   // swap the default @design-parity/checks provider
});

verdict.status 实值 pass | warn | fail (任何项目) error 发现 qq fail(b) 调查结果 命令为11y / 符号 / 语义 / 视觉 ; verdict.visualScores 每个地图 state/theme/size 键到其不同的像素分数.

尺寸

• a11y + i18n 键 授权 @design-parity/checks (第10号) 通过a ChecksProvider 接合: WCAG 对比, 触摸 目标、语义角色/标签和i18n风险. defaultChecks 连接真实的 软件包; 插入自定义提供者( 或 checksConfig),以推翻.
• 合规情况 - 平整候选人的花花样,并与 参考谱: 数字符号 尊重承诺的容忍度,打字 匹配, 颜色匹配 modulo 的全 alpha 后缀( 具有相同的作用) 值倒计时)。 当设计和代码符号词汇表不同时, a design-map.json tokens 化名(代码-名称-设计-名称) 首先提及代号,例如设计 color/on-surface 线条 代码 onSurface。 。 。 .
• 设计系统 ——全表审计:参考解析符号表 (单位:千美元)DesignReference.themeTokens,例如Figma变量 + 类型坡道)对 代码解析的主题( n)SemanticTree.themeTokens),通过同一键 别名。 覆盖颜色(模式意识)、类型坡道(精确、光谱驱动)和 数字 radius编号 :spacing (在承诺的容忍范围内)。 类型 和形状/相距名称首先通过别名,然后通过物质作用来决定 它们表示(Body/Large → bodyLarge, (中文(简体) ), radius/medium → medium) (中文(简体) ). 调查结果 携带 detail.scope: "design-system" 所以管弦乐师报告每个漂移 一次运行,不是一次每个屏幕.
• 语义 ——主题覆盖和结构(作用/标签)三角洲.
• 视觉 – 每像素 diff通过 pixelmatch加上三脚架 一个向量 引用以候选人的宽度为光线,对齐对齐 左上方,所以候选人的框架很重要: Image.gutter 已裁剪 首先关闭, 和回波, 其渲染器捕获 在固定帆布 .design-parity.json是因为 visual.candidateFrame: "crop-to-content" 用于裁剪 可选内容——仅针对其内容本身的参考文献 到达每一个边缘,所以一个有指定透明比值的引用是: 仍作整体比较DiffConfig.visualCandidateFrame) (中文(简体) ).

所有事情都经过了配置(参见: config.ts页:1 两人总是做出同样的判决.

已知差异的范围

为任何需要消耗的视觉配对通过精确目录范围 .design-parity/known-differences.json数字 :

const result = await diff(reference, candidate, {
  repoRoot,
  knownDifferences: {
    scopes: {
      "default/light": {
        system: "m3",
        component: "IconButton/Tonal",
        previewId: "iconbutton-tonal__ideal__default__light",
        referenceId: "iconbutton-tonal-ideal-light",
        variant: "ideal/default/light",
        overrides: {},
        referenceSha256,
      },
    },
  },
});

地图密钥是相同的 state/theme/size 键 visualScores范围是: 明确,因为这些目录身份无法从 源代码手柄. result.acceptances 报告 raw, (中文(简体) ), accepted,以及 unaccepted 加上每个记录的状态 原画 verdict.visualScores,视觉发现,和 三脚架没有变化: 差异绝不删除原始查找.

仅 valid 口罩进入得分联盟. 门评估之前,工会, 并且两个输入在重新复制前被分割,所以一个解析/失效的口罩 无法压制相邻像素, 接受的三角洲无法取消一个 在面具边缘反向回归.

开发

npm run build --workspace @design-parity/diff
npm test --workspace @design-parity/diff