テーマのカスタマイズ

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

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

テーマエディタを確認する

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

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

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

テーマエディタ

上の図に示すように、テーマエディタでは次のことができます。

ベーステーマについて

サイトの外観を定義するベーステーマのスタイルルールの大部分は、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)で、ベーステーマにより使用されます。詳細テーマエディタを使用してテーマをカスタマイズするで説明されているとおり、このスタイルシートで宣言されている変数、関数、mixin は、カスタム変数と SCSS セクションを使用してオーバーライドできます。

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

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

カラーパレットをカスタマイズするには、基本スタイル エディタを使用するか、テーマ変数をオーバーライドします。

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

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

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

基本スタイル エディタを使用してカラーパレットをカスタマイズする

基本スタイル エディタを使用して、プライマリアクセントのカラーパレットをすばやくカスタマイズします。

基本スタイル エディタを使用してカラーパレットをカスタマイズするには、次のようにします。

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

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

テーマ変数をオーバーライドすることによってカラーパレットをカスタマイズするには、詳細テーマエディタにアクセスして、[Variables] セクションに、次の 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);

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

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

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

次の図のように、基本スタイル エディタを使用してフォント ファミリーとフォント スタイルをすばやくカスタマイズできます。

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

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

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

テーマ変数をオーバーライドすることによってフォント ファミリーとフォント スタイルをカスタマイズするには、詳細テーマエディタにアクセスし、[Variables] セクションで、フォント ファミリーとフォント スタイルのうちの 1 つ以上を変更した値で指定します。

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

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

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

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

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

Google フォントをインポートするには、詳細テーマエディタにアクセスして、以下に示すように [Custom Styles] セクションでフォントをインポートします。

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

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

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

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

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

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

スタイルシートでのカスタム フォントの参照

[Variables] セクションで [font family and style] 変数の 1 つのカスタム フォントを参照します。例:

$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. 用途に合う会社のロゴのコピーを入手します。
    推奨サイズについては、前述の表をご覧ください。
  2. テーマエディタにアクセスします
  3. デスクトップ ディスプレイの上部にあるナビゲーション ツールバーのロゴを置き換えるには、次のようにします
    a.右側ペインの [Basic Styles] で、[Primary logo] フィールドの下にある [] をクリックします。
    b.ローカル ディレクトリでデスクトップ版のロゴを探します。
    c.[Open] をクリックして、ファイルをアップロードします。
  4. モバイルディスプレイの上部にあるナビゲーション ツールバーのロゴを置き換えるには、次のようにします。
    a.右側のペインの [Basic Styles] で [Logo options] を展開し、[Mobile logo] フィールドにある [] をクリックします。
    b.ローカル ディレクトリでモバイル版のロゴを参照します。
    c.[Open] をクリックして、ファイルをアップロードします。
  5. [Save] をクリックして、左側のペインで変更をプレビューします。
  6. [Publish] をクリックして、変更をポータルに公開します。プロンプトが表示されたら、オペレーションを確認します。

ファビコンのカスタマイズ

ウェブブラウザのアドレスバー(とその他の場所)で使用されているファビコンをカスタマイズするには、次のようにします。

  1. ファビコンとしての使用に適した会社のロゴのコピーを取得します。
    推奨サイズについては、前述の表をご覧ください。
  2. テーマエディタにアクセスします
  3. 右パネルの [Basic Styles] で [Logo options] を展開し、[Favicon] 項目にある [] をクリックします。
  4. ローカル ディレクトリでファビコン版のロゴを参照します。
  5. [Open] をクリックして、ファイルをアップロードします。
  6. [Save] をクリックして、左側のペインで変更をプレビューします。
  7. [Publish] をクリックして、変更をポータルに公開します。プロンプトが表示されたら、オペレーションを確認します。

ログインページのロゴは、デベロッパー プログラムの登録およびログイン エクスペリエンスを構成するときにカスタマイズできます。その方法は、会社情報を管理するをご覧ください。

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

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

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

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

  • 背景画像のファイル名とそのパディングを変更するには、詳細テーマエディタにアクセスし、[Custom Styles] セクションで、変更後の値で次の SCSS を指定します。

    #index {
      &.main {
        .main-content {
          padding: 0;
          background-image: url('/files/home-background.jpg');
          background-size: cover;
        }
      }
    }
    
  • 背景画像をポータルのすべてのページに追加するには、詳細テーマエディタにアクセスし、[Custom Styles] セクションで、変更後の値で次の SCSS を指定します。

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

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

タイポグラフィをカスタマイズするには、詳細テーマエディタにアクセスし、[Variables] セクションで、次のタイポグラフィ変数のうち 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);
}

詳細テーマエディタを使用してテーマをカスタマイズする

テーマをカスタマイズするには、テーマ変数をオーバーライドするか、詳細テーマエディタで直接テーマスタイル要素をカスタマイズします。

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

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

たとえば、ヘッダー ナビゲーション フッターとフッター ナビゲーション ツールバーの高さをカスタマイズするには、詳細テーマエディタの [Variables] セクションで、変更後の値を指定した次の変数を追加します。

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

テーマ変数をオーバーライドするには、次のようにします。

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

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

詳細テーマエディタの [Custom Styles] セクションで、直接テーマスタイル要素をカスタマイズします。

たとえば、ポータルにアプリを登録するときに表示される[New App] ページの [Create] ボタンのカラーを変更するには、次のテーマスタイル要素を変更した値で指定します。

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

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

テーマスタイル要素をカスタマイズするには、次のようにします。

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

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

ポータルページに全幅パネルを作成するには、次のようにします。

  1. 詳細テーマエディタで、次のテーマスタイル要素を追加します。詳細は、テーマスタイル要素をカスタマイズするをご覧ください。
    .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

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

以下のセクションでは、詳細テーマエディタの [Variables] セクションでオーバーライドできる変数をまとめます。テーマ変数をオーバーライドするを参照してください。

ベーステーマ変数

サイト全体で使用されるベーステーマの前景色をカスタマイズします。有効な値は 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 マテリアル タイポグラフをカスタマイズします。タイポグラフィ レベルごとに、font-size、line-height、font-weight を定義します。

$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);