Sass を使用したテーマ

Ignite UI for Angular doesn’t shy away from exposing its Sass theming API so you can take full control of the styling in your application. The API we expose is, to a large extent, the exact same API we use internally to build every single theme we bundle with the product. It’s abstract and allows for theming granularity on different levels - from a single component the entire application suite.

概要

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

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

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

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

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 宣言のみが生成されます。

テーマ

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

その他のリソース

概念の学習:

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

アプリケーションテーマ

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

コンポーネントテーマ

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