DialogとDrawerがブラウザデフォルト色を使用する問題を修正

wa-dialogとwa-drawerコンポーネントがユーザーエージェントのデフォルトテキスト色を使用していた問題が修正されました。これにより、これらのコンポーネントがデザイントークンで指定したテキスト色を正しく継承するようになります。

背景

wa-dialogとwa-drawerは、コンテンツのレンダリング時にブラウザのデフォルトスタイルシートのdialog { color: canvastext; }を適用していました。この結果、デザイントークンでカスタムテキスト色を設定していても、ダイアログとドロワー内のテキストは黒（ダークモードでは白）で表示されていました。

#1978で報告されたこの問題は、背景色にはWeb Awesomeのデザイントークンが適用されているにもかかわらず、テキスト色だけがブラウザデフォルトを使用するという不整合を引き起こしていました。ドキュメントコンテキストで設定したテキスト色が、これらのコンポーネント内では反映されない状態でした。

技術的な変更

src/components/dialog/dialog.styles.tsとsrc/components/drawer/drawer.styles.tsのスタイル定義にcolor: inheritプロパティが追加されました。

Dialog変更前:

.dialog {
  width: var(--width);
  max-width: calc(100% - var(--wa-space-2xl));
  max-height: calc(100% - var(--wa-space-2xl));
  background-color: var(--wa-color-surface-raised);
  border-radius: var(--wa-panel-border-radius);
  border: none;
}

Dialog変更後:

.dialog {
  width: var(--width);
  max-width: calc(100% - var(--wa-space-2xl));
  max-height: calc(100% - var(--wa-space-2xl));
  color: inherit;
  background-color: var(--wa-color-surface-raised);
  border-radius: var(--wa-panel-border-radius);
  border: none;
}

Drawer変更前:

.drawer {
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  background-color: var(--wa-color-surface-raised);
  border: none;
  box-shadow: var(--wa-shadow-l);
}

Drawer変更後:

.drawer {
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  color: inherit;
  background-color: var(--wa-color-surface-raised);
  border: none;
  box-shadow: var(--wa-shadow-l);
}

color: inheritにより、これらのコンポーネントは親要素（ドキュメントコンテキスト）からテキスト色を継承するようになりました。ブラウザのデフォルトスタイル（canvastext）は上書きされ、Web Awesomeのデザイントークンで指定した色が適用されます。

設計判断

この変更では、colorプロパティにinheritを指定するアプローチが取られました。

PR Descriptionで述べられている通り、これによりコンポーネントはブラウザのデフォルトではなくドキュメントコンテキストからテキスト色を継承します。background-colorには引き続きvar(--wa-color-surface-raised)トークンを直接指定する一方で、colorは継承に任せる実装です。

本PRは、ブラウザデフォルトスタイルとの競合をcolor: inherit1行で解決した変更です。DialogとDrawerが親要素からテキスト色を継承することで、Web Awesomeのデザイントークンが意図通りに適用され、視覚的な一貫性が保たれるようになりました。