パレット

Ignite UI for Angular は、アプリケーションで一貫した方法でカラーを更新できる CSS 変数を公開します。

概要

Ignite UI for Angular は、primary、secondary、gray、info、success、warn、error、および surface の 8 つの基本カラーの CSS 変数として 80 カラー以上のバリアントを公開します。

primary、secondary、および gray カラーは 2014 Material Design カラーパレットに従います。これらのカラーが以下のバリアントを含みます:

すべて										Primary および Secondary のみ
50	100	200	300	400	500	600	700	800	900	A100	A200	A400	A700

上記の表に示すように、gray カラーには A100、A200、A400、および A700 バリアントは含まれませんが、primary および secondary カラーには 14 カラーバリアントすべてが含まれます。2014 Material Design カラーパレットに含まれない info、success、warn、error、surface の 5つのカラーを追加しました。

上記のカラーに加えて、各カラーバリアントに Level AAA WCAG 準拠の contrast カラーも含まれています。つまり、対応する contrast カラーバリアントをベースカラーバリアントの前景カラーとして安全に使用できます。

Note

コントラストカラーは、Sass テーマエンジンによってビルド時に生成されます。CSS 変数をオーバーライドしても、対応するコントラストカラーは更新されません。

以下は、Light Material パレットで宣言された primary カラーの抜粋です。

:root {
  --ig-primary-h: 204deg;
  --ig-primary-s: 100%;
  --ig-primary-l: 50%;
  --ig-primary-a: 1;
  --ig-primary-50: hsla(
                      var(--ig-primary-h), 
                      calc(var(--ig-primary-s) * 1.23),
                      calc(var(--ig-primary-l) * 1.78), 
                      var(--ig-primary-a)
                    );
  --ig-primary-100: hsla(
                      var(--ig-primary-h), 
                      calc(var(--ig-primary-s) * 0.8),
                      calc(var(--ig-primary-l) * 1.66),
                      var(--ig-primary-a)
                    );
  --ig-primary-200: hsla(
                      var(--ig-primary-h),
                      calc(var(--ig-primary-s) * 0.64),
                      calc(var(--ig-primary-l) * 1.43),
                      var(--ig-primary-a)
                    );
  // ...
  --ig-primary-50-contrast: black;
  --ig-primary-100-contrast: black;
  --ig-primary-200-contrast: black;
  // ...
}

すべてのプライマリカラーバリアントは、--ig-primary-h、--ig-primary-s、--ig-primary-l、および --ig-primary-a の 4 つのベース変数から派生しています。これらの変数はそれぞれ、単カラーの HSLA 部分を保持します。HSLA は、hue (色相)、saturation (彩度)、lightness (明度)、および alpha (アルファ) を表します。カラーを説明するために使用されるもう 1 つのカラースキームです。primary、secondary、その他のカラーのすべてのバリアントを実行時に変更できるため、この方法を使用することにしました。

パレットの定義

パレットからカラーのバリアントを変更したい場合は、スタイルシートで HSLA 値をオーバーライドできます。たとえば、プライマリカラーを変更するのは簡単です。

/* The HSLA representation of orange (#ffa500) */
/* hsla(38.8,100%,50%, 1); */
:root {
  --ig-primary-h: 38.8deg; 
  --ig-primary-s: 100%; 
  --ig-primary-l: 50%; 
  --ig-primary-a: 1; 
}

これにより、他のすべてのプライマリバリアントが自動的に更新されます。

各カラーのカラーバリアントは単色です。これは、すべてのカラーバリアントが HSLA 変数から生成されるためです。

スコープ

パレットでカラーをオーバーライドする方法は比較的簡単です。global パレットを更新するには、アプリケーションの styles.css ファイルの :root セレクターにカラーバリアントをスコープします。

たとえば、企業のプライマリカラーが #9f349c で、そのプライマリカラーバリアントを作成するとします。これを行う方法は次のとおりです。まず、HSLA 色空間で色の HEX 表現を取得します。この場合、色相は 302deg、彩度は 51%、明度は 41%、アルファは 1 です。HSLA 値を導出したら、プライマリパレットをこの色に更新するために必要なことは、プライマリパレットのグローバル h、s、および l 値を置き換えることだけです:

:root {
  --ig-primary-h: 302deg;
  --ig-primary-s: 51%;
  --ig-primary-l: 41%;
}

これは、各プライマリカラーバリアントのコントラストカラーを自動的に計算しません。特定のカラーを他のカラーと組み合わせて使用した場合に十分なコントラストがあるかどうかを判断するのに役立つツールが多数あります。各カラーバリアントのコントラストカラーを決定する際に、Chrome の組み込みのコントラストチェッカーを使用できます。ビルド時にカラーパレットを生成する Sass 関数を提供します。選択したカラーからすべてのカラーバリアントとそのコントラストカラーを自動で生成する場合は、ドキュメントの「Sass を使用したパレット」セクションを参照してください。

単一のグローバルパレット以外に、他の CSS セレクターにスコープされる複数のパレットを作成することもできます。たとえば、青と赤のパレットをクラスセレクターにスコープできます。

/* styles.css */

/* cornflowerblue hsl(218.5,79.2%,66.1%) */
.blue-theme {
  --ig-primary-h: 218.5deg; 
  --ig-primary-s: 79.2%; 
  --ig-primary-l: 66.1%; 
  --ig-primary-a: 1; 
}

/* brick red hsl(351.7,57%,52.5%) */
.red-theme {
  --ig-primary-h: 351.7deg; 
  --ig-primary-s: 57%; 
  --ig-primary-l: 52.5%; 
  --ig-primary-a: 1; 
}

<app-component class="blue-theme"></app-component>

class 属性の値を blue-theme から red-theme に変更することで、アプリケーションのカラーを簡単に変更できます。

この方法は、個々のコンポーネントのパレットカラーをオーバーライドする場合にも機能します。複数のパレットを作成したくないが、コンポーネントで使用されるパレットのカラーを変更したい場合があります。

マテリアルアバターコンポーネントテーマを見てみましょう。背景に gray 色の 400 バリアントを使用します。これで、背景の設定を担当するプロパティをオーバーライドしてテーマをカスタマイズできます。または、gray 400 パレットカラーをオーバーライドして、無効な背景色を変更できます。

igx-avatar {
  --ig-gray-400: 146deg, 36%, 64%;
}

明暗 (Dark/Light)

Warning

前景色と背景色に最も大きな影響を与える色は、gray と surface です。ほとんどの場合、これら 2 つの色は互いに対比して表示されます。そのため、surface の色は常に gray と対照的である必要があります。

Ignite UI for Angular のパレットは、テーマが明るいまたは暗いかを示します。最も影響を与える 2 つのカラーは、gray と surface です。すべてのテーマの gray カラーバリアントは、#fff などの非常に明るい色合いまたは #222 などの非常に暗い色合いに基づいています。明るいテーマには暗い色合いの gray に基づいたグレーカラーのバリアントがあり、暗いテーマは反対です。すべての gray カラーのバリアントは白い色合いです。これらの gray カラーは、他のカラー (通常は surface カラー) に対して表示されます。テーマを適切に表示するために、surface のカラーは常にグレースケールの gray の反対側に設定します。

これをもう少し明確にするために、明るいテーマと暗いテーマの両方での gray と surface のカラーバリエーションのリストを以下に示します:

Material Light:

:root {
  /* surface is set to white, i.e. ligthness 100% */
  --ig-surface-h: 0deg;
  --ig-surface-s: 0%;
  --ig-surface-l: 100%;
  --ig-surface-a: 1;
  --ig-gray-h: 0deg;

  /* grays are based on black to contrast the surface color */
  --ig-gray-h: 0%;
  --ig-gray-s: 0%;
  --ig-gray-900: var(--ig-gray-h), var(--ig-gray-s), 13%;
}

Material Dark:

:root {
  /* surface is a dark shade of gray, i.e. lightness only at 13% */
  --ig-surface-h: 0deg;
  --ig-surface-s: 0%;
  --ig-surface-l: 13%;
  --ig-surface-a: 1;

  /* grays are based on white to contrast the surface color */
  --ig-gray-h: 0deg;
  --ig-gray-s: 0%;
  --ig-gray-900: var(--ig-gray-h), var(--ig-gray-s), 98%;
}

gray と surface カラーバリアントはほとんどのコンポーネントで使用されているため、外観全体に大きな影響を与えます。

その他のカラー

ここまでで、primary、secondary、gray、surface のカラーバリアントと、それらをオーバーライドする方法を説明しました。さらに 4 つのカラーがあります - info、success、warn、error。通常、異なる状態のカラーを設定するために使用されます。たとえば、igx-input-group コンポーネントは、入力検証状態でこれらのカラーを使用します。これらは、最初の 3 つのバリアントとして変更できます。h、s、および l 変数を更新するだけです。