パレット
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;
}
その他のリソース
関連トピック:
コミュニティに参加して新しいアイデアをご提案ください。