Ignite UI for React のパレット

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

概要

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

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

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

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

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

:root {
  //...
  --ig-primary-500: #09f;
  --ig-primary-500-contrast: hsla(from color(from var(--ig-primary-500) var(--y-contrast)) h 0 l / 1);
  --ig-primary-seed: #09f;
  --ig-primary-600: hsl(from var(--ig-primary-500) h calc(s * 1.26) calc(l * 0.89));
  --ig-primary-600-contrast: hsla(from color(from var(--ig-primary-600) var(--y-contrast)) h 0 l / 1);
  --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: hsla(from color(from var(--ig-secondary-400) var(--y-contrast)) h 0 l / 1);
  --ig-secondary-500: #df1b74;
  --ig-secondary-500-contrast: hsla(from color(from var(--ig-secondary-500) var(--y-contrast)) h 0 l / 1);
  --ig-secondary-600: hsl(from var(--ig-secondary-500) h calc(s * 1.26) calc(l * 0.89));
  --ig-secondary-600-contrast: hsla(from color(from var(--ig-secondary-600) var(--y-contrast)) h 0 l / 1);
  //...
  --ig-wcag-a: 0.31;
  --ig-wcag-aa: 0.185;
  --ig-wcag-aaa: 0.178;
  --ig-contrast-level: var(--ig-wcag-aa);
  --y: clamp(0, (y / var(--ig-contrast-level) - 1) * -infinity, 1);
  --y-contrast: xyz-d65 var(--y) var(--y) var(--y);
}

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

番号付きのバリエーションに加えて、各カラーは、パレットの生成元となったベース カラーを変更せずに保持する seed 変数を公開します。primary、secondary、およびその他の有彩色では、seed は 500 バリエーションと一致します。gray では一致しません。--ig-gray-seed はグレースケールの派生元となったカラー (サーフェス カラーの輝度から選択された黒または白) を記録し、--ig-gray-500 は生成された中間トーンです。

コントラスト カラーは、ベース カラーの輝度と選択されたコントラスト レベルから CSS 実行時に計算され、黒と白のうち読みやすい方が選択されます。この計算はカスケードの一部であるため、メイン カラー バリエーション (500) を変更すると、そのコントラスト カラーも一緒に更新されます。手動での操作は必要ありません。

パレットの定義

パレットにあるカラー バリエーションを変更したい場合は、その 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 React のパレットは、テーマを明るくするか暗くするかを示します。最も影響を受ける 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;
}