Ignite UI for Web Components のパレット

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

概要

Ignite UI for Web Components のパレットでは、8 つの基本色 (primary、secondary、surface、gray、info、success、warn、error) に対して、80 を超えるカラーバリエーションが CSS 変数として提供されます。

primary、secondary、および gray カラーは 2014 Material Design カラーパレット (英語) に則っています。これらのカラーが以下のバリエーションを含みます:

すべて										プライマリとセカンダリのみ
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 AA WCAG 準拠の contrast カラーも含まれています。つまり、対応する contrast カラーバリエーションをベースカラーバリエーションの前景カラーとして安全に使用できます。

[!Note] コントラストカラーはビルド時に生成されるため、CSS 変数をオーバーライドしても、対応するコントラストカラーは更新されません。

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

:root {
  //...
  --ig-primary-500: #09f;
  --ig-primary-500-contrast: black;
  --ig-primary-600: hsl(from var(--ig-primary-500) h calc(s * 1.26) calc(l * 0.89));
  --ig-primary-600-contrast: black;
  --ig-primary-700: hsl(from var(--ig-primary-500) h calc(s * 1.26) calc(l * 0.81));
  //...
  --ig-secondary-400: hsl(from var(--ig-secondary-500) h calc(s * 0.875) calc(l * 1.08));
  --ig-secondary-400-contrast: black;
  --ig-secondary-500: #df1b74;
  --ig-secondary-500-contrast: white;
  --ig-secondary-600: hsl(from var(--ig-secondary-500) h calc(s * 1.26) calc(l * 0.89));
  --ig-secondary-600-contrast: white;
  //...
}

すべてのプライマリカラーバリエーションは、1 つの基本変数カラーバリエーション --ig-primary-500 から派生します。他のカラー変数 (--ig-secondary-500、--ig-surface-500 など) にも同様のことが当てはまります。他のバリエーションは、メイン変数カラーバリエーション 500 を受け取り、割り当てられた変数バリエーション (600、700 など) に応じて saturation と lightness を変更する相対カラー関数 hsl() によって生成されます。primary、secondary、surface、またはその他のカラーのすべてのバリエーションを実行時に変更できるため、この方法を使用することにしました。

[!WARNING] コントラストカラーは他の部分のように CSS 実行時に生成されないため、メインカラーバリエーション (500) を変更しても、コントラストカラーは更新されません。手動で変更する必要があります。この動作は今後のリリースで改善され、コントラストカラーも CSS 実行時に計算されるようになります。

パレットの定義

パレットにあるカラーバリエーションを変更したい場合は、その 500 カラーバリエーションをオーバーライドできます。たとえば、プライマリカラーを変更するのは簡単です。

:root {
  --ig-primary-500: #09f;
}

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

各カラーのカラーバリエーションは単色です。これは、すべてのカラーバリエーションが相対カラー関数 hsl() を使用して生成されるためです。

:root {
  --ig-primary-600: hsl(from var(--ig-primary-500) h calc(s * 1.26) calc(l * 0.89));
}

スコープ

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

たとえば、企業のプライマリカラーが #9f349c で、そのプライマリカラーバリエーションを作成するとします。必要なのは、--ig-primary-500 変数を、RGB、HEX などの任意のカラー値タイプの目的のカラーに置き換えることだけです。

:root {
  --ig-primary-500: #9f349c;
}

これにより、各基本カラーバリエーションが自動的に変更されます。

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

/* styles.css */

.blue-theme {
  --ig-primary-500: #0008ff;
}

.red-theme {
  --ig-primary-500: #ff0400;
}

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

ダークとライト

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

ライトテーマとダークテーマの両方について、gray と surface のカラーバリエーションの完全なリストを以下に示します。

Bootstrap Light:

:root {
  //...
  /* surface is set to light color*/
  --ig-surface-500: white;
  //...
  /* grays are based on dark gray to contrast the surface color */
  --ig-gray-500: hsl(0, 0%, 62%);
  //...
}

Bootstrap Dark:

:root {
  //...
  /* surface is set to dark color*/
  --ig-surface-500: #222;
  //...
  /* grays are based on light gray to contrast the surface color */
  --ig-gray-500: hsl(0, 0%, 74%);
  //...
}

gray と surface カラーバリエーションはほとんどのコンポーネントで使用されており、外観全体に大きな影響を与えるため、その変更には注意が必要です。

その他のカラー

ここまでで、primary、secondary、gray、surface のカラーバリエーションと、それらをオーバーライドする方法を説明しました。さらに 4 つのカラーがあります - info、success、warn、error。通常、異なる状態のカラーを設定するために使用されます。たとえば、igc-input-group コンポーネントは、入力検証状態でこれらのカラーを使用します。これらは他のカラーバリエーションと同様に変更できます。500 バリエーションを設定するだけで、他のすべてのバリエーションが生成されます。

:root {
  --ig-info-500: #1377d5;
  --ig-success-500: #4eb862;
  --ig-warn-500: #faa419;
  --ig-error-500: #ff134a;
}

API リファレンス

Palettes