Color

Color ThemeはSparkle全体で使用する全ての色を定義した物です。

Primitive Tokens はBlack & White 、そして Gray を始めとする10種類のカラースキームから成り立っています。

各カラースキームは 、キーカラーの彩度を変化させて生成した 50 ~ 900 の10 段階の色によって構成されています。キーカラーは各カラースキームの 500 です。

Primitive Tokens で用意されている色は使用箇所や使用方法に依存しないことから、Primitive ( = 根源) が意味するようにカラースキームには色本来の名前が付けられています。

Black & White に収録されているカラーを使用する場合は Primitive Tokens を参照して UI に適用させます。

一方で UI に Black & White 以外のカラースキームを適用する場合は後述する Semantics Tokens や Component Tokens を使用します。

Semantics Tokens は Primitive Tokens を継承して構築されているカラーテーマです。

Semantics ( = 文脈) が表すように、Semantics Tokens で定義されているカラースキームは実際に使用する箇所の文脈や役割に沿った名前が付けられています。

カラースキームの内部は Primitive Tokens と同様に 50 ~ 900 の 10 段階の色が定義されています。

• Neutral colors

  背景や文字・アイコン・線など、土台を作る色を扱うためのカラースキームです。

  例: neutral

• Accent colors

  重要なテキスト・活性状態・目立たせたいボタンなど、UI全体に文脈を与えるためのカラースキームです。

  例: primary secondary

• Additional colors

  様々な状態や機能を表すためのカラースキームです。

  例: info success warning negative

Component Tokens は Semantics Tokens を継承して構築されているカラーテーマです。

各カラースキームは特定のコンポーネントに使用するために定義されており、カラースキーム名にはコンポーネント名が割り振られています。

カラースキーム内のカラーには low middle high のような具体的な強度や placeholder のような具体的な使用箇所に関する名前を付けます。

10階層から構成されるカラースキームを適応させる場合は、適応箇所がコンポーネントであっても Semantics Tokens を使用します。

10階層の配色ではなく middle や placeholder のような具体的な強度・使用箇所を定義する場合のみ、 Component Tokensを使用します。