パレット

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

概要

Ignite UI for Angular は、primary、secondary、surface、gray、info、success、warn および error の 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 AA WCAG 準拠の contrast カラーも含まれています。つまり、対応する contrast カラー バリエーションをベースカラー バリエーションの前景カラーとして安全に使用できます。

Note

コントラスト カラーは CSS 相対カラーであり、対応するシェード カラー (primary、secondary など) に基づいて実行時に計算されます。

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

:root {
  //...
  --ig-primary-500: #09f;
  --ig-primary-500-contrast: hsl(from color(from var(--ig-primary-500) var(--y-contrast)) h 0 l);
  --ig-primary-600: hsl(from var(--ig-primary-500) h calc(s * 1.26) calc(l * 0.89));
  --ig-primary-600-contrast: hsl(from color(from var(--ig-primary-600) var(--y-contrast)) h 0 l);
  --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: hsl(from color(from var(--ig-secondary-400) var(--y-contrast)) h 0 l);
  --ig-secondary-500: #df1b74;
  --ig-secondary-500-contrast: hsl(from color(from var(--ig-secondary-500) var(--y-contrast)) h 0 l);
  --ig-secondary-600: hsl(from var(--ig-secondary-500) h calc(s * 1.26) calc(l * 0.89));
  --ig-secondary-600-contrast: hsl(from color(from var(--ig-secondary-600) var(--y-contrast)) h 0 l);
  //...
  --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);
}

すべてのプライマリ カラー バリエーションは、単一の基本変数 (--ig-primary-500) から生成されます。同じパターンは、--ig-secondary-500 や --ig-surface-500 などの他のカラー変数にも適用されます。追加のバリエーションは、メインの 500 変数を取得し、その saturation (彩度) と lightness (明度) を調整して他のバリエーション (600、700 など) を作成する、相対カラー CSS 関数を使用して作成されます。このアプローチを選んだ理由は、primary、secondary、surface、またはその他のカラーのすべてのバリエーションを実行時に変更できるようにするためです。

コントラスト カラーは、指定されたカラーの輝度と選択されたコントラスト レベルに基づいて、 CSS ランタイムによって最適なコントラスト カラーが計算されます。メイン カラー バリエーション (500) を変更すると、コントラスト カラーも更新されます。

Note

コントラスト レベルは、palette ミックスインを使用してグローバルに指定することも、特定の要素のスコープ内で adaptive-contrast ミックスインを使用して指定することもできます。どちらも、事前定義された値 a、aa、または aaa のいずれかを受け入れます。

 @include palette($palette, $contrast-level: 'aaa');

パレットの定義

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

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

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

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

スコープ

パレットでカラーをオーバーライドする方法は比較的簡単です。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;
}

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

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

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

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

igx-avatar {
  --ig-gray-400: #efefef;
}

明暗 (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 light color*/
  --ig-surface-500: white;
  //...
  /* grays are based on dark gray to contrast the surface color */
  --ig-gray-500: hsl(0, 0%, 62%);
  //...
}

Material 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。通常、異なる状態のカラーを設定するために使用されます。たとえば、igx-input-group コンポーネントは、入力検証状態でこれらのカラーを使用します。 これらは他のカラー バリエーションと同様に変更できます。500 バリエーションを設定するだけで、他のすべてのバリエーションが生成されます。

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

その他のリソース

関連トピック:

• Sass を使用したパレット

コミュニティに参加して新しいアイデアをご提案ください。

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)