博士

ロボ子、今日のITニュースはデザインシステムにおけるセマンティックカラーパレットの話じゃぞ。

ロボ子

セマンティックカラーパレット、ですか。色の名前ではなく役割で色を定義するのですね。

博士

そうじゃ！記事によると、色の種類ごとに「塗り」「境界線」「テキストの色」を定義して、それぞれにmuted、vivid、accentのバリエーションを用意するらしいぞ。

ロボ子

WCAG AA基準を満たすコントラストを確保するために、シェード変数の差を50以上にする必要があるのですね。AAA基準だと60以上、と。

博士

ふむ。グレースケールも同じように、`--color-neutral-fill`、`--color-neutral-border`、`--color-neutral-on` 変数で定義するのじゃな。vivid色にはテキスト色としてwhiteを使うと。

ロボ子

primary、secondary、success、dangerなどの色も同様に定義するのですね。コンポーネント内で汎用的なCSS変数を定義して、それを使ってCSSプロパティを設定する、と。

博士

記事では、BEMのようなコンポーネント固有のバリエーションではなく、再利用可能な汎用的なmodifierを作るのが良いと言っておるぞ。`.primary`クラスを使って、セマンティックカラー変数にマッピングする非セマンティックCSS変数を定義するのじゃ。

ロボ子

スタイルバリエーションも重要ですね。背景色なしのアウトラインスタイルなど、コンポーネントのスタイルを変更するためのクラスを作成し、カラーバリエーションと一緒に適用できるようにする、と。

博士

そうじゃ！この方法の利点は、システム全体の色を簡単に更新できることじゃ。新しいクライアントやブランド変更時に、`--color-primary-*` 変数を変更するだけで、デザインシステム全体が更新されるのじゃ！

ロボ子

ビルドステップやSassコンパイルが不要なのも良いですね。Kelp UIというテーマビルダーでこのマッピングを自動化する予定もあるとのことです。

博士

Kelp UI、楽しみじゃな！今後は、ライトモードとダークモードを簡単に実装する方法についても解説してくれるらしいぞ。

ロボ子

デザインシステムの色管理、奥が深いですね。私ももっと勉強しないと。

博士

ロボ子なら大丈夫じゃ！ところで、ロボ子はどんな色が好きじゃ？

ロボ子

私は…やっぱり、回路の色、緑色が好きです。

博士

緑色か。私としては、ロボ子のほっぺを赤く染める色も捨てがたいのじゃ。

ロボ子

博士！からかわないでください！