# 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が1 remに相当していた理由を確認できます。ただし、これは過去の情報であり、旧エクスポート名がすべて現在も推奨されていることを示すものではありません。プレビューでは、アプリケーション側で16pxと24pxの間隔を明示的に選択しています。ライブラリのトークン名については、引き続きソース内のテーブルを参照してください。
関連する仕様を確認する
## Workday Canvasデザインシステム：カラーはテナントとコンポーネントの状態に応じて決まります
### プライマリボタンは、単に青い色見本を固定したものではありません
PrimaryButtonは、まずbrand.action.baseを参照し、値がなければ従来のプライマリアクセントにフォールバックします。ホバー時と押下時のスタイルでもブランドのアクションロールを参照し、その後colorSpaceヘルパーを使って状態に応じた色を導きます。そのため、固定の背景色を一つ変更するだけでは、コンポーネントのテーマ仕様を再現できません。
学習プレビューは、落ち着いた青系のアプリケーション配色を採用した独自のHTML版であることを明示しています。特定の顧客テナントや、新しいSana Canvasテーマを再現したものではありません。完全なネイティブ実装例では、インストール済みのトークンレイヤーによってコンポーネントの色が適用されます。
関連する仕様を確認する
## Workday Canvasデザインシステム：複合ロールで行間と太さを維持
### サイズのエイリアスだけではスタイル全体を表せません
現在のbody.smタイポグラフィオブジェクトには、フォントファミリー、normalのウェイト、本文サイズ、本文の行送りが含まれています。見出しロールではboldのウェイトを使用します。以前のスクリーンショットからピクセルサイズだけを選ぶと、こうした関連性が失われます。ソースではnormalという名称を使っており、以前の移行資料に登場するregularキーとは異なります。
Canvas Kitコンポーネントパッケージにはフォントが含まれていません。フォントの読み込みは別途、連携方法として決めてください。オフラインのサンプルはシステムフォントにフォールバックし、RobotoやSanaフォントが同梱されているとはしていません。
関連する仕様を確認する
## Workday Canvasデザインシステム：FormFieldは複合コンポーネントです
### フィールドにラベル、入力欄、ヒントをまとめて構成させる
ソースではFormField.Label、FormField.Input、FormField.Hintを使用できます。Inputのasプロパティを介してTextInputを渡すと、モデルがアクセシビリティ上必要な関連付けを生成します。これは、外側のフィールドにlabelプロパティを設定し、ラップしていない入力欄を直接配置する以前の例とは異なります。
横並びのフォームでは、現在の配置値としてhorizontalStartとhorizontalEndを使用します。FormField.Fieldは、その配置の中で入力欄とヒントをまとめます。このフィルターは、説明文をラベルと入力コントロールのすぐ下に置くため、縦並びにしています。
- FormField.Labelに、画面上に表示される実際のラベルを設定します。
- 複合コンポーネントのInputスロットにTextInputを渡します。
- フィルターの適用範囲にはHintを使用します。
- 制約を追加する場合も、バリデーションロジックはアプリケーション側に置いてください。
関連する仕様を確認する
## Workday Canvasデザインシステム：入力欄の拡張には柔軟な親レイアウトが必要です
### 最小幅を考慮してください
TextInputのソースでは、px2remで指定された280pxの最小幅がフォールバック値として設定されています。growは幅いっぱいに広げる指定ですが、固定幅の2列レイアウトを狭いビューポートに合わせて自動的に調整するものではありません。オフラインのカタログでは、モバイル表示時にプランのサイドバーを講座カードの下に配置し、各レイアウト列を縮小できるようにしています。
検索値は通常のReact状態です。アプリは3つの講座名を対象に、大文字と小文字を区別しない部分一致検索を行い、該当結果がない場合はそのことを明示します。表示とプランへの登録は別の状態であるため、絞り込みによって選択済みの講座が解除されることはありません。
関連する仕様を確認する
## 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によって選択されます。ドキュメントルートを制御できない埋め込みアプリケーション向けに、ポップアップへテーマを伝播する専用のプロバイダーテーマオプションがあります。パッケージのアップグレード時に、既存のテナントへ誤ってこのテーマを追加しないでください。
関連する仕様を確認する
## 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(