Storybook パレットとコンポーネントの両方で同じカラー変数を使用するにはどうすればよいですか?

Question

UI コンポーネント ライブラリを作成し、Storybook を使用してドキュメントと例を提供しました。

私の目標は、SCSS ファイルでカラー パレットを宣言し、それをコンポーネントとストーリーブック パレットで使用することです。

ストーリーブック パレットは、カラー パレットのドキュメントを作成できる組み込みのストーリーブック コンポーネントです。

したがって、デザイン システムの色が変更された場合、SCSS 変数の値を変更するだけで、カラー パレットとコンポーネントの両方が新しい色の値で更新されると考えています。

残念ながら、このセクションのストーリーブックのドキュメントは貧弱で、例にはハードコードされた色しか含まれていません。カラー パレット ページは MDX ファイルなので、そこに SCSS 変数をインポートして使用する方法がわかりません。

目標を達成する方法はありますか?

Answer 1

今夜、私が抱えていたのと同じ問題を調べているときにこれを見つけました。グーグルで調べたところ、https://dev.to/benrobertson/color-swatches-in-storybook-4aa9 も見つかりました。私はまだ試していませんが、試してみたい場合は共有したいと思います。週末にテストしてみる予定です。