パレット

概要

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

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: 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) を変更すると、コントラスト カラーも更新されます。

 @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)

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 (英語)