Как настроить тему

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

Тема состоит из глобальной таблицы стилей, которая обеспечивает единообразный внешний вид всех страниц портала. Тема позволяет изменить внешний вид всех страниц портала одновременно.

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

Как работать с редактором тем

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

Чтобы открыть редактор тем:

• На боковой панели навигации выберите Publish > Portals (Публикация > Порталы), выберите портал и нажмите Themes (Темы) на целевой странице.
• При редактировании портала нажмите Темы в раскрывающемся меню на панели навигации вверху страницы.

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

• В редакторе основных стилей можно быстро настроить следующие элементы:
  • Цветовая палитра
  • Семейство шрифтов и стили
  • Логотипы
• Переопределите переменные темы или настройте элементы стиля темы в расширенном редакторе тем, в том числе:
  • Цветовая палитра
  • Семейство шрифтов и стили
  • Панель навигации
  • Фоновое изображение
  • Типографика
• Как посмотреть изменения темы
• Как посмотреть портал в браузере
• Опубликуйте тему на портале трансляций.

О базовой теме

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

Правила стиля определяются с помощью Sassy Cascading Style Sheet (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 в базовой теме.

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

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

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

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

Как настроить логотипы

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

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

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

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

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

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

Как настроить значок сайта

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

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

Как настроить логотип на странице входа

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

Как настроить панель навигации

Вот несколько советов по настройке панели навигации:

• Настройте цвет панели навигации в верхнем и нижнем колонтитулах, изменив основной цвет, как описано в разделе Как настроить палитру цветов.
• Настройте размер и стиль шрифта для пунктов меню на панели навигации в верхнем и нижнем колонтитулах, изменив стиль Шрифт и Кнопки, как описано в разделе Как настроить семейство шрифтов и стили.
• Чтобы настроить высоту панели навигации в заголовке, откройте расширенный редактор тем и добавьте следующую переменную с нужным значением в раздел Переменные: $layout-header-height: 64px;
• Чтобы настроить высоту панели навигации в нижнем колонтитуле, откройте расширенный редактор тем и добавьте в раздел Переменные следующую переменную с нужным значением: $layout-footer-height: 44px;
• Как настроить логотип на панели навигации для компьютеров и мобильных устройств

Как настроить фоновое изображение

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

• Загрузите собственную версию изображения 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. Нажмите x, чтобы закрыть редактор тем.
7. Посмотрите изменения в области предварительного просмотра или нажмите Предварительный просмотр, чтобы увидеть, как будет выглядеть портал в браузере. Примечание. Чтобы посмотреть изменения на всех страницах, перейдите по ссылкам на панели навигации портала в области предпросмотра.
8. Нажмите Опубликовать. Вам будет предложено подтвердить изменение.

Как настроить элементы стиля темы

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

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

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

Также ознакомьтесь с информацией о том, как настроить фоновое изображение.

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

1. Как открыть редактор тем
2. На панели справа нажмите Расширенные.
3. Нажмите Специальные стили.
4. Добавьте элементы стилей темы.
5. Нажмите Сохранить.
6. Нажмите на значок x, чтобы закрыть расширенный редактор тем.
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>

Как опубликовать тему

Чтобы опубликовать в портале Live добавленные вами настройки темы и стиля:

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

Числовые значения указывают на значения затенения для элементов по умолчанию, более светлых и более темных элементов соответственно. Посмотрите содержимое файла material theming 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 Material. Для каждого уровня типографики заданы размер шрифта, высота строки и толщина шрифта.

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