パレット

Ignite UI for Angular テーマエンジンは、カラーを生成および取得するためのいくつかの関数とミックスインを提供します。

概要

Ignite UI for Angular のコンテキストでのパレットは Sass Maps として宣言され、マップのキーはパレットのカラー (primary、secondary、gray など) になります。各カラーはマップ自体であり、すべてのカラーバリアントがキーとしてリストされます。これらのカラーバリアントに割り当てられる値は、すべてのコンポーネントテーマで使用される実際のカラーです。すべてのパレットマップは、パレット関数によってプログラムで生成されます。この関数は、primary、secondary、gray、surface、info、success、warn、および error カラーの引数を受け取ります。primary カラーは通常、ブランドカラーです。igx-navbar など、主に静的要素をスタイル設定するために使用されます。secondary カラーは、ボタン、スイッチ、スライダーなどの操作可能な要素で使用される secondary カラーです。必須の引数は、primary と secondary カラーの引数です。surface カラーは、カード、メニュー、日付/タイムピッカー、バナーシートなどのようないくつかのコンポーネントの '表面' にカラーを付けるために使われます。デフォルトでは、surface、gray、info、success、warn、error は、定義済みのカラーのセットです。

カラーパレットを作成するには、グローバルテーマの基本ファイルとなる scss ファイルを作成します。_"variables.scss" と呼びます。

// _variables.scss

$melon-palette: palette(
    $primary: #2ab759,
    $secondary: #f96a88,
);

Warning

$primary、$secondary、またはその他のカラーに渡す値は、color 型である必要があります。CSS 変数は Sass ビルド時に解決できないため、引数として渡すことはできません。

すべてのカラーバリアントを含むパレットを作成しました。各バリアントには自動的に作成されたテキストのコントラストカラーが含まれます。CSS 変数を使用したパレットに関するドキュメントをまだ読んでいない場合は、こちらを参照してください。パレットのすべてのカラーバリアントに関する情報が含まれています。

palette 関数は、ビルド時に .scss ドキュメントで再利用できるカラーを作成するために内部的に多くの機能を果たします。この関数は豊かなカラーマップを作成するという点で優れていますが、カラーバリアントを生成するためのアルゴリズムは厳密であり、ニーズに完全に一致しない場合があります。コンポーネントテーマは、パレットの生成方法に関係なく、マップの形状のみに関係します。

パレットを手動で作成する場合、または関数を生成するパレットを作成する場合は、パレットマップを取得します。

$handmade-palette: (
    primary: (
        50: to-hsl(#e6eff8),
        '50-contrast': black,
        100: to-hsl(#bfd7f2),
        '100-contrast': black,
        200: to-hsl(#98bfec),
        '200-contrast': black,
        300: to-hsl(#85b5e9),
        '300-contrast': white,
        400: to-hsl(#73a6e4),
        '400-contrast': white,
        500: to-hsl(#6797de),
        '500-contrast': white,
        600: to-hsl(#3681dd),
        '600-contrast': white,
        700: to-hsl(#357fda),
        '700-contrast': white,
        800: to-hsl(#306dc8),
        '800-contrast': white,
        900: to-hsl(#284ea8),
        '900-contrast': white,
        'A100': to-hsl(#98bfec),
        'A100-contrast': white,
        'A200': to-hsl(#73a6e4),
        'A200-contrast': white,
        'A400': to-hsl(#3681dd),
        'A400-contrast': white,
        'A700': to-hsl(#284ea8),
        'A700-contrast': white
    ),
    secondary: (
        50: to-hsl(#fef7e2),
        '50-contrast': black,
        100: to-hsl(#fdeab7),
        '100-contrast': black,
        200: to-hsl(#fbdd89),
        '200-contrast': black,
        300: to-hsl(#fad15c),
        '300-contrast': black,
        400: to-hsl(#f9c63f),
        '400-contrast': black,
        500: to-hsl(#f7bd32),
        '500-contrast': white,
        600: to-hsl(#f6b02d),
        '600-contrast': white,
        700: to-hsl(#f49e2a),
        '700-contrast': white,
        800: to-hsl(#f38e28),
        '800-contrast': white,
        900: to-hsl(#f38e28),
        '900-contrast': white,
        'A100': to-hsl(#fbdd89),
        'A100-contrast': black,
        'A200': to-hsl(#f9c63f),
        'A200-contrast': black,
        'A400': to-hsl(#f6b02d),
        'A400-contrast': white,
        'A700': to-hsl(#f38e28),
        'A700-contrast': white
    ),
    gray: (
        50: to-hsl(#fff),
        '50-contrast': black,
        100: to-hsl(#fafafa),
        '100-contrast': black,
        200: to-hsl(#f5f5f5),
        '200-contrast': black,
        300: to-hsl(#f0f0f0),
        '300-contrast': black,
        400: to-hsl(#dedede),
        '400-contrast': black,
        500: to-hsl(#b3b2b2),
        '500-contrast': black,
        600: to-hsl(#979696),
        '600-contrast': white,
        700: to-hsl(#7b7a7a),
        '700-contrast': white,
        800: to-hsl(#404040),
        '800-contrast': white,
        900: to-hsl(#1a1a1a),
        '900-contrast': white
    ),
    info: (
        500: to-hsl(rgb(18, 118, 211)),
        '500-contrast': black
    ),
    success: (
        500: to-hsl(rgb(76, 184, 96)),
        '500-contrast': black
    ),
    warn: (
        500: to-hsl(rgb(251, 178, 60)),
        '500-contrast': black
    ),
    error: (
        500: to-hsl(rgb(255, 20, 75)),
        '500-contrast': black
    ),
    surface: (
        500: to-hsl(rgb(255, 255, 255)),
        '500-contrast': black
    )
);

:root {
    --ig-primary-a: 1;
    --ig-secondary-a: 1;
    --ig-info-a: 1;
    --ig-success-a: 1;
    --ig-warn-a: 1;
    --ig-error-a: 1;
    --ig-gray-a: 1;
    --ig-surface-a: 1;
}

to-hsl() 関数は、色空間に関係なく色を受け取り、その色相、彩度、明度をカンマ区切りのリストで返します。このリストは、パレット内の各シェードの CSS 変数を宣言するときに使用されます。各パレットカラー (primary、secondary、gray など) の alpha 値は個別に初期化する必要があります。

事前定義されたパレット

事前定義されたライトパレットとダークパレットを提供します。これをスキーマと一緒に使用して、コンポーネントのテーマを作成できます。

ライトパレット
- $light-material-palette
- $light-fluent-excel-palette
- $light-fluent-word-palette
- $light-fluent-palette
- $light-bootstrap-palette
- $light-indigo-palette
ダークパレット
- $dark-material-palette
- $dark-fluent-excel-palette
- $dark-fluent-word-palette
- $dark-fluent-palette
- $dark-bootstrap-palette
- $dark-indigo-palette

また、使用できるいくつかの追加パレットも提供しています。

追加のライトパレット
- $light-green-palette
- $light-purple-palette
追加のダークパレット
- $dark-green-palette
- $dark-purple-palette

すべてのライトパレットを選択したライトスキーマと組み合わせたり、またはその逆にすべてのダークパレットをニーズとビジョンに最も一致すると思われるダークスキーマと組み合わせたりできます。

デフォルトのパレット

theme ミックスインは、引数の 1 つとしてパレット (前のセクションを参照) を使用します。渡されたパレットはグローバルな $default-palette 変数に割り当てられます。この変数に保存されたパレットは、パレットが必要であるがユーザーによって明示的に提供されない場合、Sass ライブラリ全体で代替パレットとして使用されます。

この知識を活用して、アプリケーション内の複数の Sass ドキュメントで同じパレットを再利用できます。

たとえば、以下の Sass ファイルをアプリに含めることができます。

// src/styles/_variables.scss

$my-palette: palette(
  $primary: #2ab759,
  $secondary: #f96a88,
);

$default-palette: $my-palette;

メインの styles ファイル:

// src/styles/styles.scss
@use 'variables' as *;

@include theme($palette: $my-palette);

コンポーネントの .scss ファイル:

@use '../styles/styles/variables' as *;

:host {
  background: color($variant: 900);
}

これにより、_variables.scss ファイルで宣言された同じパレットがすべての Sass ファイルで使用されます。

グレースケールカラー

primary と secondary パレットのように、グレーの色合いを生成するために使用される palette 関数のカラーを提供できます。gray パレットの生成に使用されるデフォルトのカラーは #000 (black)。gray のカラーバリアントは、コンポーネント全体のテキストのカラーを設定するために使用されます。値の変更は、アプリケーションの背景または表面のカラーを変更する場合に役立ちます。たとえば、アプリケーションで暗い背景を使用する場合、gray カラーを white に設定すると、すべてのテキストのカラーは white の色合いに基づいて強制されます。

グレーのの色合いに white を使用するパレットを生成するには:

// Import the Ignite UI themes library first
$company-color: #2ab759; /* Some green shade I like */
$secondary-color: #f96a88; /* Watermelon pink */
$grayscale-base: #fff; /* Used to generate shades of gray */

$my-color-palette: palette(
    $primary: $company-color,
    $secondary: $secondary-color,
    $gray: $grayscale-base
);

カラーバリアント

color 関数を提供します。関数は、palette、color、および variant の 3 つの引数を受け取ります。

// Get the primary CSS variable reference of the 500 color variant
$my-primary-500: color();

// Get the primary CSS variable reference of the 600 color variant
$my-primary-600: color($variant: 600);

// Get the secondary A700 color variant as a HEX value from $my-palette
$my-primary-A700: color($my-palette, 'secondary', 'A700');

// Get the warn 500 color variant as HEX value from $my-palette
$my-warning-color: color($my-palette, 'warn');

.my-awesome-class {
    background: $my-primary-600;
    border-color: $my-primary-A700;
}

.warning-bg {
    background: $my-warning-color;
}

$palette 引数を省略すると、対応する CSS 変数バリアントを参照する文字列が取得されます。$color および/または $variant を指定しない場合、それぞれ primary および 500 に割り当てられます。

コントラストテキストカラー

カラーバリアントを取得する方法と同様に、パレットの各カラーバリアントのコントラストテキストカラーを取得する方法があります。

$my-primary-800: color($my-palette, 'primary', 600);
$my-primary-800-text: contrast-color($my-palette, 'primary', 600);

// sample usage
.my-awesome-article {
    color: $my-primary-800-text;
    background: $my-primary-800;
}

カラークラス

CSS クラスを使用して Web 要素 (テキストや背景など) にカラーを適用する場合もあります。パレットの各カラーの CSS クラスを生成できるミックスインがあります。

ミックスインは、CSS クラス名とパレットのカラーを渡す CSS プロパティを制御できるいくつかの引数を取得します。

$prop - カラーに割り当てられる CSS プロパティ。
$prefix - 生成されたクラス名に連結するプレフィックス文字列。デフォルトは 'igx' です。
$suffix - 生成されたクラス名に連結するサフィックス文字列。
$palette - 使用しするパレット。

たとえば、要素に背景色を適用する CSS クラスを生成する場合、以下を実行できます:

@include color-classes(
    $prop: 'background-color',
    $prefix: 'bg'
);

上記のコードは、パレットの各カラーバリアントに CSS クラスを生成します。たとえば、primary パレットの 500 カラーバリアントには、.bg-primary-500 クラスが与えられます。

<div class="bg-primary-500">...</div>

CSS 変数

ドキュメントの CSS 変数セクションでカラーパレットについて読むと、すべてのパレットカラーが CSS 変数として含まれています。theme ミックスインを使用してテーマを生成するたびに内部で行います。theme は本体で palette ミックスインを呼び出します。パレットを取得し、パレット内のカラーを CSS 変数に変換します。

このパレットは、カスタムパレットカラーを CSS 変数として含める場合に使用します。

以下はその例です。

$my-palette: palette(
  $primary: #2ab759,
  $secondary: #f96a88,
);

@include palette($my-palette);

API リファレンス

その他のリソース

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

パレット

概要

Warning

事前定義されたパレット

デフォルトのパレット

グレースケール カラー

カラー バリアント

コントラスト テキスト カラー

カラー クラス