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

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

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

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

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

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

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

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

Редактор тем

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

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

Большинство правил стиля базовой темы, определяющих внешний вид сайта, основаны на угловом материальном дизайне . 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, SCSS-файл тем материала ( 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-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), формат открытых веб-шрифтов (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 х 32 пикселей
Панель инструментов мобильной навигации 156 х 32 пикселей
Фавиконка в адресной строке браузера (и других местах) 32 х 32 пикселей
Страница входа 392 х 64 пикселей

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

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

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

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

Настройте значок

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

  1. Получите копию логотипа вашей компании, который можно использовать в качестве значка.
    Рекомендуемый размер указан в предыдущей таблице.
  2. Откройте редактор тем .
  3. В разделе «Основные стили» на правой панели разверните «Параметры логотипа» и нажмите под полем Фавикон .
  4. Найдите версию своего логотипа в виде значка в локальном каталоге.
  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. Нажмите 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>

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

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

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

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

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

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