Настройте свою тему

Вы просматриваете документацию Apigee Edge .
Перейдите в документацию Apigee X.info

Тема оформления представляет собой глобальную таблицу стилей, обеспечивающую единый внешний вид всех страниц вашего портала. Цель темы — позволить вам одновременно изменить внешний вид всех страниц вашего портала.

Вы можете настраивать, просматривать и публиковать свою тему, как описано в следующих разделах.

Изучите редактор тем.

Настройте, просмотрите и опубликуйте тему для своего портала в редакторе тем.

Чтобы получить доступ к редактору тем:

  • В боковой панели навигации выберите «Публикация» > «Порталы» , выберите свой портал и на главной странице нажмите «Темы» .
  • При редактировании портала нажмите «Темы» в выпадающем меню на верхней панели навигации.

Редактор тем

Как показано на предыдущем рисунке, редактор тем позволяет вам:

Об основной теме

Большинство базовых правил оформления темы, определяющих внешний вид сайта, основаны на Angular Material Design . Angular Material Design использует сеточные макеты, а также согласованные компоненты и стили для обеспечения единого интерактивного интерфейса.

Правила стиля определяются с помощью каскадных таблиц стилей Sassy (SCSS) . SCSS является расширенной версией каскадных таблиц стилей (CSS) и предлагает следующие преимущества:

  • Глобальные переменные, которые можно повторно использовать во всей таблице стилей.
  • Вложенные правила позволяют сэкономить время на разработке таблиц стилей.
  • Умение создавать миксины и функции.

Например:

// 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 Material, SCSS-файл для оформления тем Material ( material-theming.scss ). Эта таблица стилей объявляет переменные, функции и примеси, которые можно переопределить с помощью пользовательских переменных и SCSS-разделов, как описано в разделе «Настройка темы с помощью расширенного редактора тем» .

В зависимости от выбранной вами темы оформления пользовательского интерфейса объявляется ряд SCSS-переменных, определяющих стили типографики, цвета и макета, которые используются базовой таблицей стилей. Вы можете переопределить переменные, перечисленные в справочнике переменных темы .

Настройте цветовую палитру

Настройте цветовую палитру, используя базовый редактор стилей или переопределив переменные темы .

О категориях цветовой палитры

Цветовая палитра интегрированного портала сгруппирована по следующим категориям, которые определены с использованием цветового оформления Material Design в базовой теме.

Категория Стили
Начальный Панели навигации, заголовки, верхние части карточек и кнопки.
Вторичный <pre> и <code> текст
Акцент Навигация, ссылки и выделенные кнопки
Предупреждать Предупреждения и ошибки

Настройте цветовую палитру с помощью базового редактора стилей.

Быстро настройте палитру основных и дополнительных цветов с помощью базового редактора стилей.

Чтобы настроить цветовую палитру с помощью базового редактора стилей:

  1. Откройте редактор тем .
  2. Чтобы настроить основной цвет, в раскрывающемся списке «Основной цвет» выберите нужный цвет или нажмите «Настроить» и введите пользовательское шестнадцатеричное значение цвета в текстовое поле.
  3. Чтобы настроить акцентный цвет, в раскрывающемся списке «Акцентный цвет» выберите нужный цвет или нажмите «Настроить» и введите пользовательское шестнадцатеричное значение цвета в текстовое поле.
  4. Нажмите «Сохранить» , чтобы сохранить изменения.
  5. Просмотрите внесенные изменения в области предварительного просмотра или нажмите «Предварительный просмотр» , чтобы просмотреть изменения на портале в браузере.
    Примечание : Вы можете щелкнуть по пунктам навигации портала в области предварительного просмотра, чтобы увидеть изменения на всех страницах.
  6. Нажмите «Опубликовать» , чтобы опубликовать свою тему. Вам будет предложено подтвердить обновление.

Настройте цветовую палитру, переопределив переменные темы.

Чтобы настроить цветовую палитру, переопределив переменные темы, откройте расширенный редактор тем и в разделе «Переменные» укажите одну или несколько из следующих переменных с измененными значениями, чтобы изменить основной, дополнительный, акцентный или цвет предупреждающих сообщений соответственно. См. раздел «О категориях цветовой палитры» .

$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 ( 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. Чтобы изменить семейство шрифтов, выберите значение в раскрывающемся списке «Шрифт» .
  3. Чтобы изменить стиль шрифта, разверните раздел «Стили шрифта» и отредактируйте стили по мере необходимости, включая размер шрифта, межстрочный интервал и толщину шрифта для нужных HTML-элементов.
  4. Нажмите «Сохранить» , чтобы сохранить изменения.
  5. Просмотрите внесенные изменения в области предварительного просмотра или нажмите «Предварительный просмотр» , чтобы просмотреть изменения на портале в браузере.
    Примечание : Вы можете щелкнуть по пунктам навигации портала в области предварительного просмотра, чтобы увидеть изменения на всех страницах.
  6. Нажмите «Опубликовать» , чтобы опубликовать свою тему. Вам будет предложено подтвердить обновление.

Настройте семейство шрифтов и стили, переопределив переменные темы.

Чтобы настроить семейство шрифтов и стили, переопределив переменные темы, откройте расширенный редактор тем и в разделе «Переменные» укажите одну или несколько переменных семейства шрифтов и стиля с измененными значениями.

Например, чтобы изменить шрифт по умолчанию на Arial, определите следующую переменную:

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

Импортируйте пользовательский шрифт

Импортируйте шрифт Google (не входящий в набор шрифтов по умолчанию) или свой собственный пользовательский шрифт, а затем укажите ссылку на этот пользовательский шрифт в таблице стилей, как описано ниже.

Импортируйте шрифт Google.

Чтобы импортировать шрифт Google, откройте расширенный редактор тем и импортируйте шрифт в разделе «Пользовательские стили» , как показано ниже:

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

Импортируйте пользовательский шрифт

Импортируйте собственный пользовательский шрифт, используя правило CSS `@font-face` . Правило @font-face поддерживает множество различных форматов файлов, включая TrueType (TTF), Web Open Font Format (WOFF) и другие.

Чтобы импортировать собственный шрифт:

  1. При желании вы можете загрузить файл шрифта в менеджер ресурсов, как описано в разделе «Загрузка файла» .

  2. Откройте расширенный редактор тем и добавьте правило @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 пикселей
Значок сайта (Favicon) в адресной строке браузера (и в других местах) 32 x 32 пикселей
Страница входа 392 x 64 пикселей

Настройте логотип на панели навигации для настольных компьютеров и мобильных устройств. В зависимости от ширины вашего браузера вы можете увидеть версию логотипа для настольных компьютеров или мобильных устройств.

Удалить основной логотип нельзя, его можно только заменить. Если вы не указываете логотип для мобильного экрана, по умолчанию используется основной логотип.

Чтобы настроить логотип, используемый в панели навигации для настольных компьютеров и мобильных устройств:

  1. Получите один или несколько экземпляров логотипа вашей компании, подходящих для использования.
    Рекомендуемые размеры указаны в предыдущей таблице.
  2. Откройте редактор тем .
  3. Чтобы заменить логотип в верхней панели навигации на настольных компьютерах:
    а. В правой панели в разделе «Основные стили» щелкните в поле «Основной логотип» .
    b. Найдите версию вашего логотипа для настольных компьютеров в локальной директории.
    c. Нажмите «Открыть» , чтобы загрузить файл.
  4. Чтобы заменить логотип в верхней панели навигации на мобильных устройствах:
    а. В правой панели в разделе «Основные стили» разверните «Параметры логотипа» и нажмите под полем логотипа мобильного приложения .
    b. Найдите мобильную версию своего логотипа в локальном справочнике.
    c. Нажмите «Открыть» , чтобы загрузить файл.
  5. Нажмите «Сохранить» , чтобы просмотреть изменения в левой панели.
  6. Нажмите «Опубликовать» , чтобы опубликовать изменения на вашем портале. Подтвердите операцию, когда появится соответствующий запрос.

Настройте значок сайта (favicon).

Чтобы настроить значок сайта (favicon) , используемый в адресной строке веб-браузера (и в других местах):

  1. Получите копию логотипа вашей компании, подходящую для использования в качестве значка сайта (favicon).
    Рекомендуемый размер указан в предыдущей таблице.
  2. Откройте редактор тем .
  3. В правой панели в разделе «Основные стили» разверните «Параметры логотипа» и нажмите в поле «Фавикон» .
  4. Найдите версию вашего логотипа в виде значка сайта (favicon) в локальной директории.
  5. Нажмите «Открыть» , чтобы загрузить файл.
  6. Нажмите «Сохранить» , чтобы просмотреть изменения в левой панели.
  7. Нажмите «Опубликовать» , чтобы опубликовать изменения на вашем портале. Подтвердите операцию, когда появится соответствующий запрос.

Настройте логотип на странице входа в систему при настройке процесса регистрации и входа в вашу программу для разработчиков, как описано в разделе «Управление информацией о компании» .

Ниже приведены несколько полезных советов по настройке панели навигации:

Настройте фоновое изображение

Настройте фоновое изображение на главной странице, выполнив одно из следующих действий:

  • Загрузите свою собственную версию изображения home-background.jpg в менеджер ресурсов, используя то же имя и относительный размер файла (3000 пикселей x 1996 пикселей). Для получения дополнительной информации см. раздел «Управление ресурсами» .

  • Измените имя файла фонового изображения и его отступы, открыв расширенный редактор тем и добавив следующий SCSS-код с измененными значениями в раздел «Пользовательские стили» :

    #index {
  &.main {
    .main-content {
      padding: 0;
      background-image: url('/files/home-background.jpg');
      background-size: cover;
    }
  }
}

  • Добавьте фоновое изображение на все страницы портала, используя расширенный редактор тем и добавив следующий SCSS-код с измененным значением в разделе «Пользовательские стили» :

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

Настройте типографику

Настройте типографику, открыв расширенный редактор тем и изменив значения одной или нескольких следующих переменных типографики в разделе «Переменные» :

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

Настройте тему оформления с помощью расширенного редактора тем.

Настройте тему, переопределив переменные темы или изменив элементы стиля темы непосредственно в расширенном редакторе тем.

Переопределить переменные темы

Переопределяйте переменные темы в разделе «Переменные» расширенного редактора тем. Список переменных темы см. в разделе «Справочник по переменным темы» .

Например, чтобы настроить высоту панелей навигации в заголовке и нижнем колонтитуле, добавьте следующие переменные с измененными значениями в раздел «Переменные» расширенного редактора тем:

Дополнительные примеры см.:

Чтобы переопределить переменные темы:

  1. Откройте редактор тем .
  2. В правой панели нажмите «Дополнительно» .
  3. Нажмите «Переменные» .
  4. Добавьте переопределения ваших переменных.
    Список переменных, которые можно переопределить, см. в справочнике переменных темы .
  5. Нажмите «Сохранить» , чтобы сохранить изменения.
  6. Нажмите крестик , чтобы закрыть расширенный редактор тем.
  7. Просмотрите внесенные изменения в области предварительного просмотра или нажмите «Предварительный просмотр» , чтобы просмотреть изменения портала в браузере. Примечание : Вы можете перемещаться по навигации портала в области предварительного просмотра, чтобы просмотреть изменения на всех страницах.
  8. Нажмите «Опубликовать» , чтобы опубликовать свою тему. Вам будет предложено подтвердить обновление.

Настройте элементы стиля темы.

Настраивайте элементы стиля темы непосредственно в разделе «Пользовательские стили» расширенного редактора тем.

Например, чтобы изменить цвет кнопки «Создать» на странице «Новое приложение» , которая появляется при регистрации приложений на портале, добавьте следующий элемент стиля темы с измененным значением: 

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

См. также раздел «Настройка фонового изображения» .

Чтобы настроить элементы стиля темы:

  1. Откройте редактор тем .
  2. В правой панели нажмите «Дополнительно» .
  3. Нажмите «Пользовательские стили» .
  4. Добавьте элементы стилей вашей темы.
  5. Нажмите «Сохранить» , чтобы сохранить изменения.
  6. Чтобы закрыть расширенный редактор тем, нажмите крестик .
  7. Просмотрите внесенные изменения в области предварительного просмотра или нажмите «Предварительный просмотр» , чтобы просмотреть изменения на портале в браузере.
    Примечание : Вы можете щелкнуть по пунктам навигации портала в области предварительного просмотра, чтобы увидеть изменения на всех страницах.
  8. Нажмите «Опубликовать» , чтобы опубликовать свою тему. Вам будет предложено подтвердить обновление.

Создайте панель во всю ширину страницы портала.

Чтобы создать панель во всю ширину страницы портала:

  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. Нажмите «Опубликовать» .

Чтобы просмотреть опубликованный контент на действующем портале, нажмите кнопку «Просмотреть портал» на верхней панели навигации.

Разберитесь в правилах специфичности CSS.

Специфичность CSS описывает метод, используемый браузером для определения приоритета объявлений элементов стиля CSS при возникновении конфликтов. Специфичность CSS рассчитывается путем присвоения веса конкретному объявлению элемента стиля CSS на основе типа его селектора. Чем специфичнее селектор CSS, тем выше вес. Например, атрибуту ID будет присвоен более высокий вес в расчете, чем селектору типа.

Например, если вы определите следующие элементы стиля в своем CSS-коде, элемент абзаца будет окрашен в красный цвет, поскольку объявление элемента стиля p внутри элемента div является более специфичным, чем объявление элемента стиля p. 

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

Аналогично, если вы определите следующие объявления стилей элементов в своем CSS-коде, то любой текст, заключенный в теги <div class="test"></div> , будет окрашен в синий цвет, поскольку объявление стиля атрибута id внутри элемента div является более специфичным, чем объявление стиля элемента div . 

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

Для объявлений элементов стиля с одинаковой специфичностью приоритет будет иметь последнее определенное объявление элемента стиля. Например, при заданном порядке объявлений элементов стиля элемент абзаца будет окрашен в синий цвет. 

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

Ссылка на переменную темы

В следующих разделах приведено краткое описание переменных, которые можно переопределить в разделе «Переменные» расширенного редактора тем, как описано в разделе «Переопределение переменных темы» .

Базовая переменная темы

Настройте цвета переднего плана базовой темы, используемой на всем сайте. Допустимые значения: light и dark . 

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

Типографические переменные

Настройте угловатую типографику Material Design . Каждый уровень типографики определяет размер шрифта, межстрочный интервал и толщину шрифта. 

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