Sass を使用したテーマ

    Ignite UI for Angular は Sass テーマ API を公開し、アプリケーションのスタイル設定を制御できます。公開する API は、製品にバンドルするすべてのテーマをビルドするために内部で使用するものとほとんど同じです。抽象的で、単一のコンポーネントからアプリケーション スイート全体まで、さまざまなレベルでテーマを設定できます。

    概要

    IgniteUI for Angular はコンポーネントのデザインをマテリアル デザイン原則に基づき、デフォルトのテーマでは、Google によって作成されたコンポーネントのカラー、サイズ、タイポグラフィ、およびルックアンドフィールにできるだけ近づけるようデザインしています。マテリアル デザイン システムは変化し続けており、大きな変更の実装から逸脱することはありません。これは提供するコンポーネントのスタイルを記述および変更する方法に影響します。Microsoft Fluent、Bootstrap、および Indigo Design システムの 3 つの追加テーマをサポートしているため、マテリアル デザイン システムを簡単に変更することはできません。さまざまなコンポーネント スタイルを生成できる、モジュラー、構成可能で保守可能なベースを構築する必要がありました。古いブラウザーも新しいブラウザーも同様にサポートする必要があるため、Sass はこのために役立ち、変数、関数、およびミックスインのシステムを作成できるツールを提供しました。

    テーマへのアプローチは、テーマのスキーマ、パレット、タイポグラフィ、丸み、エレベーション、およびアニメーションの概念に基づいています。これらの概念を組み合わせてテーマを作成します。各概念をさらに分けて、より詳細なスタイル設定が可能になります。

    デザイン システムの特定の側面を保存するようにするため、公開している API を使用してすべてを変更したりスタイルを完全に書き換えたりすることはできません。

    テーマ エンジンを完全に制御できるように、各コンセプトを詳細に説明し、関連する API を説明します。

    Note

    Sass テーマ ライブラリは強力ですが、ほとんどのユーザーは少数の CSS 変数を変更するだけでデフォルトのテーマをカスタマイズできます。最初に CSS 変数のドキュメントを読むことをお勧めします。Sass は、作成したテーマをより深いレベルで変更する場合にのみ使用してください。例えば、同じコンポーネントに複数の異なる再利用可能なテーマ バリアントを作成する場合、またはアプリケーションで使用するコンポーネントのスタイルのみを含めるために生成された CSS をツリーシェークする場合です。

    パレット

    最初に理解する必要がある概念はパレットです。ビジュアル ツールでは、アプリケーションを差別化するカラーがあります。マテリアル デザイン ガイドラインは、特定のベース カラーの色相、明度、および彩度の範囲にある定義済みのカラー パレットをお勧めします。いい理由があります。カラーが調和し、背景色および前景のテキスト カラーとコントラストをつけます。これはカラーを少し制限します。ブランディングに一致するマテリアル ガイドラインに基づいてカスタム パレットを使用することはできません。これは問題であるため、ユーザーが提供された基本色からマテリアル デザインのようなパレットを生成するアルゴリズムを使用します。パレットでそれぞれの色相にコントラスト テキスト カラーを生成します。

    スキーマ

    2 番目に大切なコンセプトはテーマのスキーマです。テーマのスキーマは、各コンポーネント テーマのレシピのようなものです。これらは、使用するパレット カラー、全体的な丸みおよび影についての情報を個々のコンポーネント テーマに提供します。たとえば、コンポーネント スキーマはコンポーネント テーマに要素の背景色が primary パレットの 500 バリアントであることを伝えます。ただし、ユーザーがコンポーネント テーマに渡すパレットは無視します。

    タイポグラフィ

    タイポグラフィは Sass テーマ ライブラリの別のモジュールで、個々のコンポーネント テーマから分離されています。デフォルトで使用されるタイポグラフィもありますが、アプリケーションのスタイル設定をさらにカスタマイズできます。タイポグラフィはスタイル設定で中心的な役割を担います。アプリケーションで見出し、サブ見出し、ボタン、本文などのフォント ファミリ、サイズ、太さを変更するメソッドを提供します。

    丸み

    Sass テーマ システムは、各コンポーネントの最小丸みと最大丸みを定義します。CSS のコンテキストで border-radius という用語に馴染みがあるかもしれません。丸みは border-radius を使用してコンポーネントの要素をスタイル設定する点で似ていますが、テーマ システムのコンテキストで丸みは 0 から 1 の間の数値です。丸みが 0 のコンポーネントは、コンポーネント テーマで定義された最小境界線半径を使用します。0 またはゼロ以外の値にできます。同様に、丸みを1に設定すると、border-radius がコンポーネントの最大許容半径に設定されます。最小および最大の border-radius はコンポーネント テーマで定義されますが、基本的な丸みの値はコンポーネント スキーマで設定されます。

    エレベーション

    エレベーションは、各コンポーネント テーマの異なる部分に設定される影です。マテリアル デザインガ イドラインで規定される 25 (0～24) レベルに基づきます。影の数に制限があるため、アプリケーションで深度階層を一貫性のある方法で定義できます。Sass では、値に box-shadows を含む 24 のエレベーション レベルのマップとして定義され、後でコンポーネント テーマに渡されます。コンポーネント スキーマは、特定の要素が使用する必要のあるエレベーション レベルに関する一般的な情報をテーマに提供します。

    アニメーション

    一部のコンポーネントは、キーフレーム トランジションとアニメーションを使用して、状態の変化を明確に伝えます。インポートしてアプリケーション全体で使用できるキーフレーム アニメーションとタイミング関数のライブラリが含まれます。これらはツリーシェークされているため、同じアニメーション ミックスインを 2 回含めると、出力スタイルシートに単一の CSS 宣言のみが生成されます。

    テーマ

    最後にコンポーネント テーマがあります。パレット、スキーマ、エレベーション、丸み、アニメーションは、テーマと一緒に使用する必要があります。個々のコンポーネントにテーマを提供し、アプリケーション全体およびすべてのコンポーネントのスタイルを設定するグローバル テーマを提供します。パレットとスキーマをグローバル テーマに渡すと後は自動的に処理されます。もちろん、カスタム スキーマ、エレベーションを作成し、コンポーネント テーマ ミックスインに丸みとカラーの異なる値を渡すことで、各コンポーネントを個別にスタイル設定できます。

    その他のリソース

    概念の学習:

    アプリケーション全体のテーマを作成する方法の詳細:

    コンポーネント固有のテーマを作成する方法の詳細:

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