インポートの範囲とモードオプション
デザイントークン JSON の分析、タブ範囲、モードペアの変換、state のマージ・置換を Import モーダルが行う方法。
パネルの Load Design Tokens モーダルは、state を変更する前に分析ステップを実行します。 SCHEMA_V1、SCHEMA_V2、SCHEMA_V3 のいずれかのドキュメントを貼り付けると、モーダルは JSON とスキーマを検証し、エントリー数を数え、明示的な light/dark ペアを検出し、未知の トークンキーを表示します。分析は state を持たない処理であり、ストレージへ書き込んだり 新しい tweak state を構築したりしません。入力後に自動で実行され、Analyze 操作では同じ 処理を直ちに実行します。
インポート範囲を選ぶ
分析結果には、ドキュメントに含まれる tabs が表示されます。各エントリーにはタブ id、既知か 外部タブか、トークンエントリー数が表示されます。マウント済みの設定タブは最初から選択されます。 現在のパネルにないタブは確認用に表示されますが、選択はできません。既知のタブ内にある未知の トークンキーは警告として表示され、ロード時にはスキップされます。
ローダーはデシリアライズの前にドキュメントを範囲指定します。選択しなかったタブは警告を生成せず、 現在の state を保持します。そのため、より大きなパネルがエクスポートしたドキュメントから、1 つの タブだけを安全に読み込めます。
明示的なモードペアを変換する
分析で明示的なモードペアが見つかると、モーダルに modeSides のオプションが表示されます。 このオプションが変換するのは、すでに明示的なペアになっているリーフだけです。プレーンな値と モードに依存しないタブの値はそのまま残り、モードに依存しないタブがモード依存になることもありません。
modeSides | 意味 |
|---|---|
as-is | インポートした light 側と dark 側をそのまま保持します。 |
swap | インポートした light 側と dark 側を入れ替えます。 |
light-only | light 側を読み込み、既存または宣言済みの dark 側を保持します。 |
dark-only | dark 側を読み込み、既存または宣言済みの light 側を保持します。 |
light-to-both | インポートした light 側を light と dark の両方へコピーします。 |
light-only と dark-only で保持する側は、マウント済みインスタンスの現在値、設定済みの既定値、 最後にもう一方のインポート側、という順で選ばれます。ローダーは元のリーフ形状も保持します。 文字列のペアは light-dark(...) 文字列のまま、セマンティックオブジェクトはオブジェクト形式のままです。 共通の splitLightDark() パーサーが完全なトップレベルのペアを認識します。
選択したタブを置換・マージする
strategy は選択したタブとマウント済みインスタンスを組み合わせる方法を決めます。
strategy | 意味 |
|---|---|
replace | 選択したタブのスライスを置換します。ドキュメントにない値は既定値へ戻ります。 |
merge | インポートした値を選択したタブへ重ね、ドキュメントにない現在値を保持します。 |
選択していないタブは常に現在の state を保持します。Import モーダルは、マウント済みインスタンスの 現在の state と設定を deserialize() へ渡すため、タブ範囲、一方の側の保持、マージの挙動はユーザーが 操作しているパネルに対して適用されます。範囲とオプションを選んだ後、Load がデシリアライズを 実行し、結果の state をコミットします。
エクスポート/インポートのスキーマと差分ルールは アプライパイプラインのリファレンスで説明しています。 直接のモードペアのマニフェスト形状はトークンマニフェストのリファレンスをご覧ください。