テーマのカスタマイズ

このページは ApigeeApigee ハイブリッドに適用されます。

Apigee Edge ドキュメントを表示する

テーマは、ポータルのすべてのページに統一されたデザインを提供するグローバルなスタイルシートで構成されます。テーマの目的は、ポータルのすべてのページのデザインを一度に変更できるようにすることです。

以降のセクションで説明するように、テーマをカスタマイズ、プレビュー、公開できます。

テーマエディタの操作

ポータルのテーマは、テーマエディタで、カスタマイズ、プレビュー、公開します。

テーマエディタにアクセスするには:

  • サイド ナビゲーション ツールバーで [公開] > [ポータル] を選択し、目的のポータルを選択して、ランディング ページの [テーマ] をクリックします。
  • ポータルを編集する場合は、上部のナビゲーション ツールバーにあるプルダウンで [テーマ] をクリックします。

テーマエディタ

上の図に示すように、テーマエディタでは以下のことを行えます。

ベーステーマについて

サイトの外観を定義するベーステーマのスタイルルールの大部分は Angular マテリアル デザインに基づいています。Angular マテリアル デザインは、グリッドベースのレイアウトと、一貫性のあるコンポーネントおよびスタイルを使用して、統一感のある操作性を提供します。

スタイルルールは、Sassy カスケーディング スタイルシート(SCSS)を使用して定義されます。SCSS はカスケーディング スタイルシート(CSS)のスーパーセットであり、次のような利点があります。

  • スタイルシート全体で再利用できるグローバル変数。
  • スタイルシートの開発時間を短縮するネストされたルール。
  • ミックスイン(mixin)や関数を作成できる。

例:

// Variable declaration
$my-variable: 12px;

// Nested selectors
.container-selector {
  .element-selector {
    padding: $my-variable;
  }
}

// The SCSS compiler will compile the above code to:
.container-selector .element-selector {
  padding: 12px;
}

// Function declaration
@function double($x) { return $x * 2; }

// Call function
.my-selector { height: double(12px); }

// The SCSS compiler will compile the above code to:
.my-selector { height: 24px; }

SCSS は、コンテンツがウェブページにレンダリングされる前にコンパイルされ、従来の CSS に変換されます。

Angular マテリアル スタイルシート、すなわちマテリアル テーマ設定 SCSS ファイル(material-theming.scss)は、ベーステーマで使用されます。このスタイルシートは、[Advanced Theme Editor] を使用してテーマをカスタマイズするで説明されているように、カスタム変数と SCSS セクションを使用してオーバーライドできる変数、関数、mixin を宣言します。

UI テーマの選択肢に基づいて、タイポグラフィ、カラー、レイアウト スタイルを定義し、ベース スタイルシートによって使用される複数の SCSS 変数が宣言されます。テーマ変数のリファレンスに記載の変数は、オーバーライドできます。

カラーパレットをカスタマイズする

カラーパレットは、[Basic Styles] エディタを使用するか、テーマ変数をオーバーライドしてカスタマイズします。

カラーパレットのカテゴリについて

統合ポータルのカラーパレット定義は、以下のカテゴリに分類され、ベーステーマでマテリアル デザイン カラースタイルを使用して定義されています。

カテゴリ スタイル
プライマリ ナビゲーション ツールバー、見出し、カードヘッダー、ボタン
セカンダリ <pre><code> テキスト
アクセント ナビゲーション、リンク、強調されたボタン
警告 警告とエラー

[Basic Styles] エディタを使用してカラーパレットをカスタマイズする

[Basic Styles] エディタを使用して、プライマリアクセントのカラーパレットを手軽にカスタマイズします。

[Basic Styles] エディタを使用してカラーパレットをカスタマイズするには:

  1. テーマエディタにアクセスします
  2. プライマリ カラーをカスタマイズするには、[メインカラー] プルダウンで色を選択するか、[カスタム] をクリックしてテキスト ボックスにカスタムの 16 進数カラー値を入力します。
  3. アクセント カラーをカスタマイズするには、[アクセント カラー] プルダウンで色を選択するか、[カスタム] をクリックしてテキスト ボックスにカスタムの 16 進数カラー値を入力します。
  4. [保存] をクリックして、変更を保存します。
  5. プレビュー ペインで変更を確認します。または、[プレビュー] をクリックしてポータルの変更をブラウザでプレビューします。
    : プレビュー ペインでポータルのナビゲーションをクリックすると、すべてのページの変更を確認できます。
  6. [公開] をクリックしてテーマを公開します。更新の確認を求めるメッセージが表示されます。

テーマ変数をオーバーライドしてカラーパレットをカスタマイズする

テーマ変数をオーバーライドしてカラーパレットをカスタマイズするには、[Advanced Theme Editor] にアクセスし、[変数] セクションに、下に挙げる変数と調整した値を 1 つ以上追加して、プライマリ、セカンダリ、アクセント、警告メッセージの色をそれぞれ変更します。カラーパレットのカテゴリについてをご覧ください。

$primary: mat-palette($mat-grey, 800, 100, 900);
$secondary: mat-palette($mat-green, 700, 100, 900);
$accent: mat-palette($mat-blue, 600, 700, 900);
$warn: mat-palette($mat-red);

インポートされているマテリアル テーマ SCSS ファイル(material-theming.scss)の内容を確認し、定義済みのカラー変数($mat-grey など)を特定します。数値は、それぞれデフォルト、明色、暗色のシェーディング値を示します。

別の方法として、独自のカラー変数を作成することもできます。例:

$my-color-variable: (
    50 : #f9f0e7,
    100 : #f0d8c2,
    200 : #e6bf9a,
    300 : #dba572,
    400 : #d49153,
    500 : #cc7e35,
    600 : #c77630,
    700 : #c06b28,
    800 : #b96122,
    900 : #ad4e16,
    A100 : #ffebe0,
    A200 : #ffc9ad,
    A400 : #ffa77a,
    A700 : #ff9661,
    // Color to render text presented on a background of the same level
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #000000,
        500 : #000000,
        600 : #000000,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);

つづいて、次の例のように、これを使用してカラーパレットを変更します。

$primary: mat-palette($my-color-variable, 900, 200, 400);

フォント ファミリーとフォント スタイルをカスタマイズする

フォント ファミリーとフォント スタイルは、[Basic Styles] エディタを使用するか、テーマ変数をオーバーライドしてカスタマイズします。カスタム フォントをインポートすることもできます。

[Basic Styles] エディタを使用してフォント ファミリーとフォント スタイルをカスタマイズする

次の図のように、[Basic Styles] エディタを使用してフォント ファミリーとフォント スタイルを手軽にカスタマイズできます。

[Basic Styles] エディタを使用してフォント ファミリーとフォント スタイルをカスタマイズするには:

  1. テーマエディタにアクセスします
  2. フォント ファミリーを変更するには、[フォント] プルダウンから値を選択します。
  3. フォント スタイルを変更するには、[Font styles] セクションを開き、必要に応じて、目的の HTML 要素のフォントサイズ、行の高さ、フォントの太さなどのスタイルを編集します。
  4. [保存] をクリックして、変更を保存します。
  5. プレビュー ペインで変更を確認します。または、[プレビュー] をクリックしてポータルの変更をブラウザでプレビューします。
    : プレビュー ペインでポータルのナビゲーションをクリックすると、すべてのページの変更を確認できます。
  6. [公開] をクリックしてテーマを公開します。更新の確認を求めるメッセージが表示されます。

テーマ変数をオーバーライドしてフォント ファミリーとフォント スタイルをカスタマイズする

テーマ変数をオーバーライドすることによってフォント ファミリーとフォント スタイルをカスタマイズするには、[Advanced Theme Editor] にアクセスし、[変数] セクションで、フォント ファミリーとフォント スタイル変数と調整した値を 1 つ以上含めます。

たとえば、デフォルト フォントを Arial に変更するには、次の変数を定義します。

$typography-main-font-family: 'Arial';

カスタム フォントをインポートする

以下で説明するように、Google フォント(デフォルトのフォントのセットに含まれていません)または独自のカスタム フォントをインポートして、スタイルシートでカスタム フォントを参照します。

Google フォントをインポートする

Google フォントをインポートするには、[Advanced Theme Editor] にアクセスして、下に示すように [カスタム スタイル] セクションでフォントをインポートします。

@import url(https://fonts.googleapis.com/css?family=Indie+Flower);

カスタム フォントをインポートする

独自のカスタム フォントは、@font-face CSS ルールを使用してインポートします。@font-face ルールは、TrueType(TTF)、Web Open Font Format(WOFF)など、さまざまなファイル形式をサポートしています。

独自のカスタム フォントをインポートするには:

  1. 必要に応じて、ファイルのアップロードの説明に沿って、フォント ファイルをアセット マネージャーにアップロードします。
  2. [Advanced Theme Editor] にアクセスし、[@font-face] ルールを [カスタム スタイル] セクションに追加します。ここで、font-family はフォント名を指定し、url はフォント ファイルの場所(この場合はアセット マネージャー)を指定し、MyCustomFont.tff はカスタム フォント ファイルの名前で、format はフォント形式を指定します。

    @font-face {
       font-family: 'MyCustomFont';
       src: url('files/MyCustomFont.tff') format('truetype')
    }
    

スタイルシートでカスタム フォントを参照する

[変数] セクションで、フォント ファミリーとスタイル変数のいずれかでカスタム フォントを参照します。例:

$typography-main: mat-typography-config(
    $font-family: '"Indie Flower", "Oxygen", sans-serif',
    $display-4: mat-typography-level(112px, 112px, 300), // One-off huge headers
    $display-3: mat-typography-level(56px, 56px, 400), // One-off large headers
    $display-2: mat-typography-level(45px, 48px, 400), // One-off medium headers
    $display-1: mat-typography-level(34px, 40px, 400), // One-off small headers
    $headline: mat-typography-level(24px, 32px, 400), // <h1> tags
    $title: mat-typography-level(20px, 32px, 500), // <h2> tags
    $subheading-2: mat-typography-level(16px, 28px, 400), // <h3> tags
    $subheading-1: mat-typography-level(15px, 24px, 400), // <h4> tags
    $body-2: mat-typography-level(14px, 24px, 500), // Bolder body text
    $body-1: mat-typography-level(16px, 22px, 400), // Base body text
    $caption: mat-typography-level(12px, 20px, 400), // Smaller body and hint text
    $button: mat-typography-level(14px, 14px, 500), // Buttons
    $input: mat-typography-level(16px, 1.125, 400) // Input form fields
);

ポータルで使用するロゴは、次の場所でカスタマイズできます。

ロゴの場所 デフォルトのファイルサイズ
デスクトップ ナビゲーション ツールバー 196 x 32 ピクセル
モバイル ナビゲーション ツールバー156 x 32 ピクセル
ブラウザのアドレスバーにあるファビコン(他の場所にもあります)32 x 32 ピクセル
[ログイン] ページ392 x 64 ピクセル

デスクトップとモバイル ディスプレイのナビゲーション ツールバーにあるロゴをカスタマイズします。ブラウザの幅に応じて、デスクトップ用とモバイル用のどちらかのロゴが表示されます。

メインロゴは削除できず、置き換えることのみ可能です。モバイル表示用のロゴを指定しない場合は、デフォルトでメインロゴが使用されます。

ナビゲーション ツールバーのデスクトップおよびモバイル表示用のロゴをカスタマイズするには:

  1. 用途に合う会社のロゴのコピーを 1 つ以上入手します。
    推奨サイズについては、前掲の表をご覧ください。
  2. テーマエディタにアクセスします
  3. デスクトップ ディスプレイの上部にあるナビゲーション ツールバーのロゴを置き換えるには:
    a.右ペインの [Basic Styles] で、[Primary logo] フィールドにある をクリックします。
    b.ローカル ディレクトリで、デスクトップ版のロゴを探します。
    c. [オープン] をクリックして、ファイルをアップロードします。
  4. 上部のナビゲーション ツールバーにあるモバイル表示用のロゴを置き換えるには:
    a. 右ペインの [Basic Styles] で [Logo options] を開き、[Mobile logo] フィールドにある をクリックします。
    b. ローカル ディレクトリで、モバイル用のロゴを探します。
    c. [オープン] をクリックして、ファイルをアップロードします。
  5. [保存] をクリックして、左ペインで変更をプレビューします。
  6. [公開] をクリックして、変更をポータルに公開します。メッセージが表示されたら操作を確定します。

ファビコンをカスタマイズする

ウェブブラウザのアドレスバーなどで使用されているファビコンをカスタマイズするには:

  1. ファビコンとしての使用に適した自社のロゴのコピーを入手します。
    推奨サイズについては、前掲の表をご覧ください。
  2. テーマエディタにアクセスします
  3. 右ペインの [Basic Styles] で [Logo options] を開き、[ファビコン] フィールドにある をクリックします。
  4. ローカル ディレクトリで、ファビコン版のロゴを探します。
  5. [オープン] をクリックして、ファイルをアップロードします。
  6. [保存] をクリックして、左ペインで変更をプレビューします。
  7. [公開] をクリックして、変更をポータルに公開します。メッセージが表示されたら操作を確定します。

会社情報を管理するで説明されているとおり、ログインページのロゴは、デベロッパー プログラムの登録およびログイン エクスペリエンスを構成する際にカスタマイズします。

ナビゲーション ツールバーをカスタマイズするための簡単なヒントを、以下に示します。

背景画像をカスタマイズする

ホームページの背景画像は、次のいずれかの操作を行ってカスタマイズします。

  • home-background.jpg 画像の独自のバージョンを、同じ名前と相対ファイルサイズ(3,000 ピクセル x 1,996 ピクセル)を使用してアセット マネージャーにアップロードします。詳細については、アセットの管理をご覧ください。

  • 背景画像のファイル名とそのパディングを、[Advanced Theme Editor] にアクセスし、[カスタム スタイル] セクションに、次の SCSS と変更後の値を含めて変更します。

    #index {
      &.main {
        .main-content {
          padding: 0;
          background-image: url('/files/home-background.jpg');
          background-size: cover;
        }
      }
    }
    
  • [Advanced Theme Editor] にアクセスし、[カスタム スタイル] セクションに、次の SCSS と変更後の値を含めて、背景画像をポータルのすべてのページに追加します。

     body {
        background-image: url('/files/background-image.jpg');
     }
    
    

タイポグラフィをカスタマイズする

タイポグラフィのカスタマイズは、[Advanced Theme Editor] にアクセスし、[変数] セクションで次のタイポグラフィ変数の値を 1 つ以上調整することで行います。

  • $typography-main
  • $typography-header
  • $typography-footer
  • $typography-context-bar

例:

// Main content typography (includes dialog and notification popups)
$typography-main: mat-typography-config(
    $font-family: 'Roboto, "Oxygen", sans-serif',
    $display-4: mat-typography-level(112px, 112px, 300), // One-off huge headers
    $display-3: mat-typography-level(56px, 56px, 400), // One-off large headers
    $display-2: mat-typography-level(45px, 48px, 400), // One-off medium headers
    $display-1: mat-typography-level(34px, 40px, 400), // One-off small headers
    $headline: mat-typography-level(24px, 32px, 400), // <h1> tags
    $title: mat-typography-level(20px, 32px, 500), // <h2> tags
    $subheading-2: mat-typography-level(16px, 28px, 400), // <h3> tags
    $subheading-1: mat-typography-level(15px, 24px, 400), // <h4> tags
    $body-2: mat-typography-level(14px, 24px, 500), // Bolder body text
    $body-1: mat-typography-level(16px, 22px, 400), // Base body text
    $caption: mat-typography-level(12px, 20px, 400), // Smaller body and hint text
    $button: mat-typography-level(14px, 14px, 500), // Buttons
    $input: mat-typography-level(16px, 1.125, 400) // Input form fields
);

つづいて、次の例に示すとおり、このタイポグラフィを特定の CSS セレクタに適用します。

@include mat-base-typography($custom-typography-config, '.css-selector');

別の方法としては、次の例に示すとおり、カスタム タイポグラフィで定義した特定のタイポグラフィ レベルを CSS セレクタに適用することもできます。

.css-selector {
  @include mat-typography-level-to-styles($custom-typography-config, display-3);
}

[Advanced Theme Editor] でテーマをカスタマイズする

テーマをカスタマイズするには、テーマ変数をオーバーライドするか、[Advanced Theme Editor] でテーマスタイル要素を直接カスタマイズします。

テーマ変数をオーバーライドする

テーマ変数は、[Advanced Theme Editor] の [変数] セクションでオーバーライドします。テーマ変数の一覧については、テーマ変数のリファレンスをご覧ください。

たとえば、ヘッダーとフッターのナビゲーション ツールバーの高さをカスタマイズするには、[Advanced Theme Editor] の [変数] セクションに、次の変数と変更した値を含めます。

他の例については、次のセクションをご覧ください。

テーマ変数をオーバーライドするには:

  1. テーマエディタにアクセスします
  2. 右ペインで、[詳細設定] をクリックします。
  3. [変数] をクリックします。
  4. オーバーライドする変数を追加します。
    オーバーライドできる変数の一覧については、テーマ変数のリファレンスをご覧ください。
  5. [保存] をクリックして、変更を保存します。
  6. [x] をクリックして [Advanced Theme Editor] を閉じます。
  7. プレビュー ペインで変更を確認します。または、[プレビュー] をクリックしてポータルの変更をブラウザでプレビューします。注: プレビュー ペインでポータルのナビゲーションをクリックすると、すべてのページの変更を確認できます。
  8. [公開] をクリックしてテーマを公開します。更新の確認を求めるメッセージが表示されます。

テーマスタイル要素をカスタマイズする

テーマスタイル要素は、[Advanced Theme Editor] の [カスタム スタイル] セクションで直接カスタマイズします。

たとえば、ポータルでアプリを登録するときに表示される[新しいアプリ] ページの [作成] ボタンの色を変更するには、次のテーマスタイル要素と変更した値を含めます。

.main .main-content button.app-save {
  color: blue;
}

また、背景画像のカスタマイズもご覧ください。

テーマスタイル要素をカスタマイズするには:

  1. テーマエディタにアクセスします
  2. 右ペインで、[詳細設定] をクリックします。
  3. [カスタム スタイル] をクリックします。
  4. テーマスタイル要素を追加します。
  5. [保存] をクリックして、変更を保存します。
  6. [x] をクリックして [Advanced Theme Editor] を閉じます。
  7. プレビュー ペインで変更を確認します。または、[プレビュー] をクリックしてポータルの変更をブラウザでプレビューします。
    : プレビュー ペインでポータルのナビゲーションをクリックすると、すべてのページの変更を確認できます。
  8. [公開] をクリックしてテーマを公開します。更新の確認を求めるメッセージが表示されます。

ポータルページで全幅サイズのパネルを作成する

ポータルページに全幅パネルを作成するには:

  1. テーマスタイル要素のカスタマイズに記載のとおり、[Advanced Theme Editor] で、次のテーマスタイル要素を追加します。
    .full-width__container {
          position: relative;
          left: 50%;
          right: 50%;
          max-width: 100vw;
          margin-left: -50vw;
          margin-right: -50vw;
          background-image: url("/files/your-image.jpg");
          background-size: cover;
          background-position: 50% 50%;
          padding: 0;
         } 
    
        .full-width__centered {
          @include centered-content();
        }
    
        .full-width__content {
          // Add any additional padding here and NOT in .full-width__centered. Adding padding to
          // .full-width__centered will result in a horizontal scroll bar. You can exclude this class
          // and corresponding <div> container if no additional padding control other than the
          // min page padding is needed.
        }
  2. ページエディタを使用してポータル コンテンツを開発するに記載のとおり、ポータルページのコンテンツを編集して次の <div> 要素を含めます。
    <div class="full-width__container">
      <div class="full-width__centered">
        <div class="full-width__content">  <!-- Include this div if you need additional padding -->
          <h2>Full Width Container</h2>
          <p>
            This content will align with the page header and other content outside
            of this full width container
          </p>
        </div>
      </div>
    </div>

テーマを公開する

追加したテーマとスタイルのカスタマイズをライブポータルに公開するには:

  1. テーマエディタにアクセスします
  2. [公開] をクリックします。

ライブポータルで公開したコンテンツを表示するには、上部のナビゲーション ツールバーで [View Portal] をクリックします。

CSS の詳細度ルールについて

CSS の詳細度では、CSS スタイル要素の宣言に競合が発生した場合に、ブラウザが優先順位を判断する方法が表現されます。CSS の詳細度は、そのセレクタタイプに基づいて、個別の CSS スタイル要素の宣言に重みを適用することで計算されます。CSS セレクタが限定的であるほど重みは高くなります。例を挙げると、ID 属性にはタイプセレクタよりも高い重みが計算で与えられます。

たとえば、次のスタイル要素を CSS コードで定義した場合、段落要素の色は赤になります。これは、div 要素内の p スタイル要素の宣言の方が p スタイル要素の宣言よりも限定的であるためです。

div p { color: red }  ← More specific
p { color: blue }

同様に、次のスタイル要素の宣言を CSS コードで定義した場合、<div class="test"></div> タグで囲まれたテキストの色は青になります。これは、div 要素内の ID 属性スタイルの宣言の方が div スタイル要素の宣言よりも限定的であるためです。

div#test { background-color: blue; }   More specific
div { background-color: red; }

同じ詳細度を持つスタイル要素の宣言では、最後に定義されたスタイル要素の宣言が優先されます。たとえば、次のスタイル要素宣言の順序では、段落要素の色が青になります。

p { color: red }
p { color: blue }  ← Last specified

テーマ変数のリファレンス

以下のセクションでは、テーマ変数のオーバーライドで説明したように、[Advanced Theme Editor] の [変数] セクションでオーバーライドできる変数をまとめます。

ベーステーマ変数

サイト全体で使用されるベーステーマの前景色をカスタマイズします。有効な値は lightdark です。

$base-theme: light;

カラーパレット変数

プライマリ、セカンダリ、アクセント、警告メッセージの色に対応する次の変数をそれぞれ変更することで、カラーパレットをカスタマイズします。カラーパレットのカテゴリについてをご覧ください。

$primary: mat-palette($mat-grey, 800, 100, 900);
$secondary: mat-palette($mat-green);
$accent: mat-palette($mat-blue);
$warn: mat-palette($mat-red);

数値はそれぞれ、デフォルト、明色、暗色の要素のシェーディング値を示します。定義済みのカラー変数を特定するには、マテリアル テーマ SCSS ファイル(material-theming.scss)の内容を調べます。

たとえば、プライマリ カラーパレットを緑に変更するには、次のようにします。

$primary: mat-palette($mat-green, 800, 100, 900);

ベーステーマで定義されているデフォルト カラーセットのシェーディング値のみをカスタマイズするには、シェーディング値を調整した次のコードを含めます。

$primary: mat-palette($custom-hex-primary, 800, 100, 900);
$secondary: mat-palette($custom-hex-secondary, 800, 100, 900);
$accent: mat-palette($custom-hex-accent, 800, 100, 900);
$warn: mat-palette($custom-hex-warn, 800, 100, 900);

フォント ファミリー変数とフォント スタイル変数

フォント ファミリーとフォント スタイルをカスタマイズします。

// If using a custom font, import it by URL.
$typography-main-font-family: 'Roboto, sans-serif';

// Must resolve to a pixel value
$layout-responsive-breakpoint: 900px;
$layout-header-height: 64px;
$layout-header-menu-item-height: 36px;
$layout-header-menu-item-horiz-padding: 16px;
$layout-header-nested-menu-item-vert-padding: 5px;
$layout-header-menu-resp-item-height: 64px;
$layout-footer-height: 44px;
$layout-footer-menu-item-height: 36px;
$layout-footer-menu-item-horiz-padding: 16px;
$layout-footer-nested-menu-item-vert-padding: 5px;
$layout-context-bar-height: 60px;
$layout-context-bar-button-height: 36px;
$layout-context-bar-button-horiz-padding: 16px;
$layout-main-content-max-width: 1400px;
$layout-main-content-vert-padding: 38px;
$layout-horizontal-min-padding: 24px;

// Uses variables declared above
$typography-header: $typography-main;
$typography-footer: $typography-main;
$typography-context-bar: $typography-main;

次の例のように、独自のカスタム タイポグラフィを指定し、より細かく調整します。

$typography-context-bar: mat-typography-config(
    $font-family: 'Ubuntu, sans-serif',
    $headline: mat-typography-level(30px, 30px, 500), // Title
    $button: mat-typography-level(19px, 19px, 200) // Action buttons
);

タイポグラフィ変数

Angular マテリアル タイポグラフィをカスタマイズします。各タイポグラフィ レベルで、フォントサイズ、行の高さ、フォントの太さを定義します。

$typography-main-display-4: mat-typography-level(112px, 112px, 300);
$typography-main-display-3: mat-typography-level(56px, 56px, 400);
$typography-main-display-2: mat-typography-level(45px, 48px, 400);
$typography-main-display-1: mat-typography-level(34px, 40px, 400);
$typography-main-headline: mat-typography-level(24px, 32px, 400);
$typography-main-title: mat-typography-level(20px, 32px, 400);
$typography-main-subheading-2: mat-typography-level(16px, 28px, 400);
$typography-main-subheading-1: mat-typography-level(15px, 24px, 400);
$typography-main-body-2: mat-typography-level(14px, 24px, 400);
$typography-main-body-1: mat-typography-level(16px, 22px, 400);
$typography-main-caption: mat-typography-level(12px, 20px, 400);
$typography-main-button: mat-typography-level(14px, 14px, 700);
$typography-main-input: mat-typography-level(16px, 1.125, 400);

// Copies properties declared above into a cohesive object
$typography-main: mat-typography-config(
  $font-family: $typography-main-font-family,
  $display-4: $typography-main-display-4,
  $display-3: $typography-main-display-3,
  $display-2: $typography-main-display-2,
  $display-1: $typography-main-display-1,
  $headline: $typography-main-headline,
  $title: $typography-main-title,
  $subheading-2: $typography-main-subheading-2,
  $subheading-1: $typography-main-subheading-1,
  $body-2: $typography-main-body-2,
  $body-1: $typography-main-body-1,
  $caption: $typography-main-caption,
  $button: $typography-main-button,
  $input: $typography-main-input);