--- title: パレット description: keywords: Ignite UI for Angular, UI コントロール, Angular ウィジェット, web ウィジェット, UI ウィジェット, Angular, ネイティブ Angular コンポーネント スイート, ネイティブ Angular コントロール, ネイティブ Angular コンポーネント ライブラリ _language: ja --- # パレット
Ignite UI for Angular exposes CSS variables that allow you to update the colors in your application in a consistent way.
## 概要 Ignite UI for Angular は、`primary`、`secondary`、`surface`、`gray`、`info`、`success`、`warn` および `error` の 8 つの基本カラーの CSS 変数として 80 カラー以上のバリエーションを公開します。 `primary`、`secondary`、および `gray` カラーは [2014 Material Design カラー パレット](https://material.io/design/color/the-color-system.html#tools-for-picking-colors)に従います。これらのカラーが以下のバリエーションを含みます:
All Primary & Secondary Only
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](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) 準拠の `contrast` カラーも含まれています。つまり、対応する `contrast` カラー バリエーションをベースカラー バリエーションの前景カラーとして安全に使用できます。 コントラスト カラーは CSS 相対カラーであり、対応するシェード カラー (primary、secondary など) に基づいて実行時に計算されます。 以下は、Light Material パレットで宣言された `primary` 変数カラーの抜粋です。 ```css :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`) を変更すると、コントラスト カラーも更新されます。 コントラスト レベルは、`palette` ミックスインを使用してグローバルに指定することも、特定の要素のスコープ内で `adaptive-contrast` ミックスインを使用して指定することもできます。どちらも、事前定義された値 `a`、`aa`、または `aaa` のいずれかを受け入れます。 ```scss @include palette($palette, $contrast-level: 'aaa'); ``` ## パレットの定義 パレットにあるカラーのバリアントを変更したい場合は、その `500` カラー バリエーションをオーバーライドできます。たとえば、プライマリ カラーを変更するのは簡単です。 ```css :root { --ig-primary-500: #09f; } ``` これにより、他のすべてのプライマリ バリアントが自動的に更新されます。 各カラーのカラー バリエーションは単色です。これは、すべてのカラー バリエーションが相対カラー関数 `hsl()` を使用して生成されるためです。 ## スコープ パレットでカラーをオーバーライドする方法は比較的簡単です。_global_ パレットを更新するには、アプリケーションの `styles.css` ファイルの `:root` セレクターにカラー バリエーションをスコープします。 たとえば、企業のプライマリ カラーが `#9f349c` で、そのプライマリ カラー バリアントを作成するとします。必要なのは、`--ig-primary-500` 変数を、RGB、HEX などの任意のカラー値タイプの目的のカラーに置き換えることだけです。 ```css :root { --ig-primary-500: #9f349c; } ``` これにより、各基本カラー バリエーションが自動的に変更されます。 単一のグローバル パレット以外に、他の CSS セレクターにスコープされる複数のパレットを作成することもできます。たとえば、青と赤のパレットをクラス セレクターにスコープできます。 ```css /* styles.css */ .blue-theme { --ig-primary-500: #0008ff; } .red-theme { --ig-primary-500: #ff0400; } ``` ```html ``` class 属性の値を `blue-theme` から `red-theme` に変更することで、アプリケーションのカラーを簡単に変更できます。 この方法は、個々のコンポーネントのパレット カラーをオーバーライドする場合にも機能します。複数のパレットを作成したくないが、コンポーネントで使用されるパレットのカラーを変更したい場合があります。 マテリアル アバター コンポーネント テーマを見てみましょう。背景に _gray_ 色の _400_ バリエーションを使用します。これで、背景の設定を担当するプロパティをオーバーライドしてテーマをカスタマイズできます。または、_gray 400_ パレット カラーをオーバーライドして、無効な背景色を変更できます。 ```css igx-avatar { --ig-gray-400: #efefef; } ``` ## 明暗 (Dark/Light) 前景色と背景色に最も大きな影響を与える色は、`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:_ ```css :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:_ ```css :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` バリエーションを設定するだけで、他のすべてのバリエーションが生成されます。 ```css :root { --ig-info-500: #1377d5; --ig-success-500: #4eb862; --ig-warn-500: #faa419; --ig-error-500: #ff134a; } ``` ## その他のリソース 関連トピック: - [Sass を使用したパレット](./sass/palettes.md) コミュニティに参加して新しいアイデアをご提案ください。 - [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)