パレット

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

    概要

    Ignite UI for Angular は、primarysecondarygrayinfosuccesswarnerror、および surface の 8 つの基本カラーの CSS 変数として 80 カラー以上のバリアントを公開します。

    primarysecondary、および 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 AAA WCAG 準拠の contrast カラーも含まれています。つまり、対応する contrast カラー バリアントをベースカラー バリアントの前景カラーとして安全に使用できます。

    Note

    コントラスト カラーは、Sass テーマ エンジンによってビルド時に生成されます。CSS 変数をオーバーライドしても、対応するコントラスト カラーは更新されません。

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

    :root {
      --ig-primary-h: 204deg;
      --ig-primary-s: 100%;
      --ig-primary-l: 50%;
      --ig-primary-a: 1;
      --ig-primary-50: hsla(
                          var(--ig-primary-h), 
                          calc(var(--ig-primary-s) * 1.23),
                          calc(var(--ig-primary-l) * 1.78), 
                          var(--ig-primary-a)
                        );
      --ig-primary-100: hsla(
                          var(--ig-primary-h), 
                          calc(var(--ig-primary-s) * 0.8),
                          calc(var(--ig-primary-l) * 1.66),
                          var(--ig-primary-a)
                        );
      --ig-primary-200: hsla(
                          var(--ig-primary-h),
                          calc(var(--ig-primary-s) * 0.64),
                          calc(var(--ig-primary-l) * 1.43),
                          var(--ig-primary-a)
                        );
      // ...
      --ig-primary-50-contrast: black;
      --ig-primary-100-contrast: black;
      --ig-primary-200-contrast: black;
      // ...
    }
    

    すべてのプライマリ カラー バリアントは、--ig-primary-h--ig-primary-s--ig-primary-l、および --ig-primary-a の 4 つのベース変数から派生しています。これらの変数はそれぞれ、単カラーの HSLA 部分を保持します。HSLA は、hue (色相)、saturation (彩度)、lightness (明度)、および alpha (アルファ) を表します。カラーを説明するために使用されるもう 1 つのカラー スキームです。primarysecondary、その他のカラーのすべてのバリアントを実行時に変更できるため、この方法を使用することにしました。

    パレットの定義

    パレットからカラーのバリアントを変更したい場合は、スタイルシートで HSLA 値をオーバーライドできます。たとえば、プライマリ カラーを変更するのは簡単です。

    /* The HSLA representation of orange (#ffa500) */
    /* hsla(38.8,100%,50%, 1); */
    :root {
      --ig-primary-h: 38.8deg; 
      --ig-primary-s: 100%; 
      --ig-primary-l: 50%; 
      --ig-primary-a: 1; 
    }
    

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

    各カラーのカラー バリアントは単色です。これは、すべてのカラー バリアントが HSLA 変数から生成されるためです。

    スコープ

    パレットでカラーをオーバーライドする方法は比較的簡単です。global パレットを更新するには、アプリケーションの styles.css ファイルの :root セレクターにカラー バリアントをスコープします。

    たとえば、企業のプライマリ カラーが #9f349c で、そのプライマリ カラー バリアントを作成するとします。これを行う方法は次のとおりです。 まず、HSLA 色空間で色の HEX 表現を取得します。この場合、色相は 302deg、彩度は 51%、明度は 41%、アルファは 1 です。HSLA 値を導出したら、プライマリ パレットをこの色に更新するために必要なことは、プライマリ パレットのグローバル h、s、および l 値を置き換えることだけです:

    :root {
      --ig-primary-h: 302deg;
      --ig-primary-s: 51%;
      --ig-primary-l: 41%;
    }
    

    これは、各プライマリ カラー バリアントのコントラスト カラーを自動的に計算しません。特定のカラーを他のカラーと組み合わせて使用した場合に十分なコントラストがあるかどうかを判断するのに役立つツールが多数あります。各カラー バリアントのコントラストカラーを決定する際に、Chrome の組み込みのコントラスト チェッカーを使用できます。ビルド時にカラー パレットを生成する Sass 関数を提供します。選択したカラーからすべてのカラー バリアントとそのコントラスト カラーを自動で生成する場合は、ドキュメントの「Sass を使用したパレット」セクションを参照してください。

    単一のグローバル パレット以外に、他の CSS セレクターにスコープされる複数のパレットを作成することもできます。たとえば、青と赤のパレットをクラス セレクターにスコープできます。

    /* styles.css */
    
    /* cornflowerblue hsl(218.5,79.2%,66.1%) */
    .blue-theme {
      --ig-primary-h: 218.5deg; 
      --ig-primary-s: 79.2%; 
      --ig-primary-l: 66.1%; 
      --ig-primary-a: 1; 
    }
    
    /* brick red hsl(351.7,57%,52.5%) */
    .red-theme {
      --ig-primary-h: 351.7deg; 
      --ig-primary-s: 57%; 
      --ig-primary-l: 52.5%; 
      --ig-primary-a: 1; 
    }
    
    <app-component class="blue-theme"></app-component>
    

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

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

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

    igx-avatar {
      --ig-gray-400: 146deg, 36%, 64%;
    }
    

    明暗 (Dark/Light)

    Warning

    前景色と背景色に最も大きな影響を与える色は、graysurface です。ほとんどの場合、これら 2 つの色は互いに対比して表示されます。そのため、surface の色は常に gray と対照的である必要があります。

    Ignite UI for Angular のパレットは、テーマが明るいまたは暗いかを示します。最も影響を与える 2 つのカラーは、graysurface です。すべてのテーマの gray カラー バリアントは、#fff などの非常に明るい色合いまたは #222 などの非常に暗い色合いに基づいています。明るいテーマには暗い色合いの gray に基づいたグレー カラーのバリアントがあり、暗いテーマは反対です。すべての gray カラーのバリアントは白い色合いです。これらの gray カラーは、他のカラー (通常は surface カラー) に対して表示されます。テーマを適切に表示するために、surface のカラーは常にグレースケールの gray の反対側に設定します。

    これをもう少し明確にするために、明るいテーマと暗いテーマの両方での graysurface のカラー バリエーションのリストを以下に示します:

    Material Light:

    :root {
      /* surface is set to white, i.e. ligthness 100% */
      --ig-surface-h: 0deg;
      --ig-surface-s: 0%;
      --ig-surface-l: 100%;
      --ig-surface-a: 1;
      --ig-gray-h: 0deg;
    
      /* grays are based on black to contrast the surface color */
      --ig-gray-h: 0%;
      --ig-gray-s: 0%;
      --ig-gray-900: var(--ig-gray-h), var(--ig-gray-s), 13%;
    }
    

    Material Dark:

    :root {
      /* surface is a dark shade of gray, i.e. lightness only at 13% */
      --ig-surface-h: 0deg;
      --ig-surface-s: 0%;
      --ig-surface-l: 13%;
      --ig-surface-a: 1;
    
      /* grays are based on white to contrast the surface color */
      --ig-gray-h: 0deg;
      --ig-gray-s: 0%;
      --ig-gray-900: var(--ig-gray-h), var(--ig-gray-s), 98%;
    }
    

    graysurface カラー バリアントはほとんどのコンポーネントで使用されているため、外観全体に大きな影響を与えます。

    その他のカラー

    ここまでで、primarysecondarygraysurface のカラー バリアントと、それらをオーバーライドする方法を説明しました。さらに 4 つのカラーがあります - infosuccesswarnerror。通常、異なる状態のカラーを設定するために使用されます。たとえば、igx-input-group コンポーネントは、入力検証状態でこれらのカラーを使用します。 これらは、最初の 3 つのバリアントとして変更できます。hs、および l 変数を更新するだけです。

    その他のリソース

    関連トピック:

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