# Workday Canvas 设计系统
## Workday Canvas 设计系统界面预览
筛选课程标题、添加课程（每门仅限一次）、移除已选课程，并查看实时总时长。
## Workday Canvas 设计系统设计参考
当前 Canvas Kit 源码和 Canvas 设计令牌 sys.json。下方的原始 JSON 名称是源码路径，并非臆造的生成式 CSS 变量名称。与基础设计令牌别名对应的值会标注为别名；带日期的迁移参考明确标注为历史内容。
### 当前间距语义
| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| sys.padding.xs | {base.size.100} | 输入框的水平内边距角色。 |
| sys.padding.md | {base.size.200} | 组件默认内边距。 |
| sys.padding.xl | {base.size.300} | 卡片内边距。 |
| sys.gap.sm | {base.size.100} | 紧凑布局中的相邻元素间距。 |
| sys.gap.md | {base.size.200} | 默认行内间距。 |
| sys.gap.xl | {base.size.400} | 卡片内侧留白。 |
| sys.gap.xxl | {base.size.800} | 区块间距。 |
### 当前字体与形状
| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| sys.type.body.sm | font-size body.sm + line-height body.sm + normal weight | 复合正文文本角色。 |
| sys.font-size.body.sm | {base.size.200} | 正文基础字号别名。 |
| sys.line-height.body.sm | {base.size.300} | 正文行高别名。 |
| sys.font-weight.normal | {base.font-weight.400} | 当前名称为 normal，而非 regular。 |
| sys.shape.sm | {base.size.50} | 小圆角。 |
| sys.shape.md | {base.size.100} | 输入框圆角。 |
| sys.shape.full | {base.size.75} × 100 | 全圆角。 |
### FormField 组合方式
| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| FormField.Label | Connected label element | 与输入框的生成式关联。 |
| FormField.Input as={TextInput} | Polymorphic input slot | 这不是旧版的 label 属性 API。 |
| FormField.Hint | Linked helper content | 说明输入框的预期内容。 |
| orientation | vertical / horizontalStart / horizontalEnd | 使用当前支持的对齐方式。 |
| FormField.Field | Input and hint alignment wrapper | 适用于水平布局。 |
### TextInput 实现
| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| grow | 100% width when true | 输入框的响应式扩展。 |
| width | number or string | 可选的覆盖值。 |
| minimum width fallback | px2rem(280) | 检查狭窄父容器中的布局。 |
| error | error / caution styling | 由应用提供验证逻辑。 |
| transition | 0.2s box-shadow, 0.2s border-color | 源码中的实际转换。 |
| font size role | system.legacy.fontSize.subtext.lg | 不要用无关的标题类型替换组件内部实现。 |
### PrimaryButton 实现
| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| Background | brand.action.base, with legacy accent fallback | 租户品牌样式。 |
| Hover | brand.action.dark or colorSpace.hover | 状态颜色根据操作颜色派生。 |
| Pressed | brand.action.darkest or colorSpace.pressed | 明显的按压态样式。 |
| variant="inverse" | Inverse surface and foreground roles | 适用于对比度合适的背景。 |
| Border radius | system.legacy.shape.full | 当前源码仍保留旧版兼容性。 |
### 迁移参考，不是当前设计令牌名称
| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| Former space.s → system.space.x4 | 1rem in 2023 migration table | 当前源码将内边距与间距区分开来。 |
| Former space.m → system.space.x6 | 1.5rem in 2023 migration table | 不要假定旧名称仍是首选。 |
| Former borderRadius.m → system.shape.x1 | 0.25rem in 2023 migration table | 当前源码使用语义化的形状尺寸。 |
## Workday Canvas 设计系统完整指南
实用指南，介绍如何为真实界面选择、应用和评审此系统。
完整指导、实现起点和源代码链接。
## Workday Canvas 设计系统：复制迁移示例前，先阅读当前源码
### 间距现在按用途区分
> Canvas 的间距体系从 canvas-kit-react/tokens 中的 T 恤尺码间距常量，演进到带编号的 system.space 设计令牌，再发展为 padding 和 gap 等源码分类。当前 sys.json 通过基础设计令牌引用来表达这些分类对应的底层值。本参考保留了实际路径，而不是通过拼接单词臆造 CSS 变量。
在转换旧版应用时，迁移表仍然很有参考价值：它解释了为什么过去的 space.s 对应 1rem。不过，这只是历史依据，并不意味着所有旧版导出项都是当前首选接口。预览中使用的是应用自行选定的 16 和 24px 间隔；设计令牌名称应以源码表为准。
阅读配套规范
## Workday Canvas 设计系统：颜色由租户和组件状态决定
### 主按钮不只是一个固定的蓝色色块
PrimaryButton 会先读取 brand.action.base；如果没有该值，则回退到旧版主强调色。悬停态和按压态样式也会先查询 brand 操作颜色角色，再通过 colorSpace 辅助函数派生状态颜色。因此，仅更改一个硬编码的背景色无法复现组件的主题约定。
原始学习预览采用克制的蓝色应用配色，并明确标注为一种 HTML 解读。它并非某个特定客户租户或新版 Sana Canvas 主题的渲染效果。完整的原生示例会使用已安装的设计令牌层来提供组件颜色。
阅读配套规范
## Workday Canvas 设计系统：复合角色保留行高和字重
### 字号别名并不等于完整的文本样式
当前的 body.sm 文本对象组合了字体系列、normal 字重、正文字号和正文行高。标题角色使用粗体字重。若只从旧截图中挑选一个像素字号，这些关联就会丢失。源码使用 normal，而不是旧版迁移说明中出现的 regular 键。
Canvas Kit 组件包不包含字体。字体加载应作为独立的集成决策；离线示例使用系统备用字体，不会声称内置了 Roboto 或 Sana 字体。
阅读配套规范
## Workday Canvas 设计系统的 FormField 是一个复合组件
### 让字段组合标签、输入框和提示
源代码提供 FormField.Label、FormField.Input 和 FormField.Hint。将 TextInput 作为 prop 传给 Input，可让模型生成无障碍关联。这与旧示例不同：旧示例会在外层字段上设置 label prop，并直接放入未封装的输入框。
对于水平表单，当前的方向值为 horizontalStart 和 horizontalEnd。FormField.Field 会在该对齐方式下将输入框与提示组合在一起。我们的筛选器仍采用垂直布局，因为说明文字应紧跟在标签和控件下方。
- 在 FormField.Label 中放置清晰可见的标签。
- 通过复合组件的 Input 插槽传入 TextInput。
- 使用 Hint 说明筛选范围。
- 添加约束时，将验证逻辑保留在应用中。
阅读配套规范
## Workday Canvas 设计系统中，可扩展的输入框仍需要灵活的父容器
### 考虑最小宽度
TextInput 的备用最小宽度为 280px，在源代码中通过 px2rem 表示。grow 会请求使用完整宽度，但不能让僵硬的双列父容器自动适应窄视口。离线目录会在移动设备上将计划侧栏移至课程卡片下方，并允许各布局列收缩。
搜索值是普通的 React 状态。应用会对三个课程标题执行不区分大小写的子串匹配，并明确显示空结果。筛选器不会清除已选课程，因为目录可见性与计划成员资格是不同的状态。
阅读配套规范
## Workday Canvas 设计系统中，选择状态独立于可见结果而保留
### 使用稳定的课程 ID 并推导总时长
每门原始课程都有 ID、标题和时长。选中列表保存 ID，显示的总时长则根据课程记录推导得出。筛选目录不会移除已选项目。移除项目后，其“添加”操作会立即恢复，且总时长会相应减少。
这是一个原创的本地规划场景。它不会调用 Workday API、为员工办理注册，也不会修改学习记录。明确这一界限，可避免原型被误认为会执行真实的业务交易。
1. 仅筛选目录视图。
2. 每个课程 ID 仅添加一次。
3. 根据这些 ID 推导已选课程和总分钟数。
4. 移除已选项目，但不重置搜索。
阅读配套规范
## Workday Canvas 设计系统中，使用主题组件前应先加载令牌
### Provider 与 CSS 层各司其职
当前的入门示例会在应用入口处导入基础、品牌、组件和系统变量样式，然后使用 CanvasProvider 包裹界面。仅使用 provider 不能替代这些 CSS 定义。此处的代码遵循这一组合方式，并提供完整的 React 根节点。
Sana Canvas 为可选项：其变量会在系统变量之后加载，文档中所述的 html data-theme 属性用于选择该主题。无法控制文档根节点的嵌入式应用，可通过专用的 provider 主题选项将主题传递到弹出窗口。升级软件包时，不要意外将该主题添加到现有租户。
阅读配套规范
## Workday Canvas 设计系统组件示例
### 完整的独立交互示例
将完整文档保存为 index.html，然后在浏览器中打开。这是对 Canvas 交互模式和克制的企业级层级结构的原创离线 HTML 解读。配色和布局由应用自行决定，并非 Sana 租户的实际渲染效果。
```
Canvas learning plan interpretation
Learning workspace Personal development · Local plan Make room to grow Choose a few focused lessons for your learning plan.
Find a course Search filters the catalog; your selected courses stay in the plan.
Independent HTML interpretation of Canvas composition patterns. Original palette, course illustrations and content; no Workday account or enrollment service is connected.
Build a learning plan
Find a course
setQuery(e.target.value)}/>
Filter the three example course titles.
{visible.map(c=>{c.name} {c.minutes} minutes
setChosen(old=>[...old,c.id])}>
{chosen.includes(c.id)?'Added to plan':'Add to plan'}
{!visible.length&&No matching courses.
}
Your local plan {selected.length} courses · {selected.reduce((sum,c)=>sum+c.minutes,0)} minutes
{selected.map(c=>{c.name} setChosen(old=>old.filter(id=>id!==c.id))}>Remove {c.name} )}
No enrollment is submitted.
;
}
createRoot(document.getElementById('root')).render(
Build a learning plan
Find a course
setQuery(e.target.value)}/>
Filter the three example course titles.
{visible.map(c=>{c.name} {c.minutes} minutes
setChosen(old=>[...old,c.id])}>
{chosen.includes(c.id)?'Added to plan':'Add to plan'}
{!visible.length&&No matching courses.
}
Your local plan {selected.length} courses · {selected.reduce((sum,c)=>sum+c.minutes,0)} minutes
{selected.map(c=>{c.name} setChosen(old=>old.filter(id=>id!==c.id))}>Remove {c.name} )}
No enrollment is submitted.
;
}
createRoot(document.getElementById('root')).render(