Angular Material 18 уровней шрифтовой шкалы

Я обновился до Angular 18 (и скорректировал стили тем в соответствии с API SCSS Материала 3), но не могу понять, как определить уровни масштаба типографики (размеры шрифтов) с помощью нового API. Раньше это делалось так:

$my-custom-typography-config: mat.m2-define-typography-config(
  $headline-1: mat.m2-define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
  $headline-2: mat.m2-define-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
  $headline-3: mat.m2-define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
  $headline-4: mat.m2-define-typography-level(34px, 40px, 400),
  $headline-5: mat.m2-define-typography-level(24px, 32px, 400),
  // ...
);

Но я не могу найти ничего подобного в новой документации по темам . Лучшее, что я нашел, это: https://material.angular.io/guide/typography#type-scale-levels но там не приведен пример.

Как я могу это сделать?

angular-material angular-material-theming angular18

27.05.2024 11:19

Лучшие 10 тем на основе Angular Material

Затрудняетесь выбрать подходящие шаблоны и темы для своего проекта? Потерялись в огромном количестве вариантов? Не волнуйтесь, мы решили эту проблему...

574

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Документация по этому вопросу все еще отсутствует, но если вы настроите свою тему на использование системных переменных с use-system-variables, вы получите набор токенов для установки любого желаемого размера (см. источник).

$my-theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: mat.$azure-palette,
      tertiary: mat.$blue-palette,
    ),
    density: (
      scale: 0,
    ),
    typography: (
      use-system-variables: true, // this here
    ),
  )
);

:root {
  @include mat.all-component-themes($my-theme);
  @include mat.system-level-typography($my-theme);
}

А вот список с текущими значениями по умолчанию

    --sys-body-large: 400 1rem / 1.5rem Roboto, sans-serif;
    --sys-body-large-font: Roboto, sans-serif;
    --sys-body-large-line-height: 1.5rem;
    --sys-body-large-size: 1rem;
    --sys-body-large-tracking: 0.031rem;
    --sys-body-large-weight: 400;
    --sys-body-medium: 400 0.875rem / 1.25rem Roboto, sans-serif;
    --sys-body-medium-font: Roboto, sans-serif;
    --sys-body-medium-line-height: 1.25rem;
    --sys-body-medium-size: 0.875rem;
    --sys-body-medium-tracking: 0.016rem;
    --sys-body-medium-weight: 400;
    --sys-body-small: 400 0.75rem / 1rem Roboto, sans-serif;
    --sys-body-small-font: Roboto, sans-serif;
    --sys-body-small-line-height: 1rem;
    --sys-body-small-size: 0.75rem;
    --sys-body-small-tracking: 0.025rem;
    --sys-body-small-weight: 400;
    --sys-display-large: 400 3.562rem / 4rem Roboto, sans-serif;
    --sys-display-large-font: Roboto, sans-serif;
    --sys-display-large-line-height: 4rem;
    --sys-display-large-size: 3.562rem;
    --sys-display-large-tracking: -0.016rem;
    --sys-display-large-weight: 400;
    --sys-display-medium: 400 2.812rem / 3.25rem Roboto, sans-serif;
    --sys-display-medium-font: Roboto, sans-serif;
    --sys-display-medium-line-height: 3.25rem;
    --sys-display-medium-size: 2.812rem;
    --sys-display-medium-tracking: 0rem;
    --sys-display-medium-weight: 400;
    --sys-display-small: 400 2.25rem / 2.75rem Roboto, sans-serif;
    --sys-display-small-font: Roboto, sans-serif;
    --sys-display-small-line-height: 2.75rem;
    --sys-display-small-size: 2.25rem;
    --sys-display-small-tracking: 0rem;
    --sys-display-small-weight: 400;
    --sys-headline-large: 400 2rem / 2.5rem Roboto, sans-serif;
    --sys-headline-large-font: Roboto, sans-serif;
    --sys-headline-large-line-height: 2.5rem;
    --sys-headline-large-size: 2rem;
    --sys-headline-large-tracking: 0rem;
    --sys-headline-large-weight: 400;
    --sys-headline-medium: 400 1.75rem / 2.25rem Roboto, sans-serif;
    --sys-headline-medium-font: Roboto, sans-serif;
    --sys-headline-medium-line-height: 2.25rem;
    --sys-headline-medium-size: 1.75rem;
    --sys-headline-medium-tracking: 0rem;
    --sys-headline-medium-weight: 400;
    --sys-headline-small: 400 1.5rem / 2rem Roboto, sans-serif;
    --sys-headline-small-font: Roboto, sans-serif;
    --sys-headline-small-line-height: 2rem;
    --sys-headline-small-size: 1.5rem;
    --sys-headline-small-tracking: 0rem;
    --sys-headline-small-weight: 400;
    --sys-label-large: 500 0.875rem / 1.25rem Roboto, sans-serif;
    --sys-label-large-font: Roboto, sans-serif;
    --sys-label-large-line-height: 1.25rem;
    --sys-label-large-size: 0.875rem;
    --sys-label-large-tracking: 0.006rem;
    --sys-label-large-weight: 500;
    --sys-label-large-weight-prominent: 700;
    --sys-label-medium: 500 0.75rem / 1rem Roboto, sans-serif;
    --sys-label-medium-font: Roboto, sans-serif;
    --sys-label-medium-line-height: 1rem;
    --sys-label-medium-size: 0.75rem;
    --sys-label-medium-tracking: 0.031rem;
    --sys-label-medium-weight: 500;
    --sys-label-medium-weight-prominent: 700;
    --sys-label-small: 500 0.688rem / 1rem Roboto, sans-serif;
    --sys-label-small-font: Roboto, sans-serif;
    --sys-label-small-line-height: 1rem;
    --sys-label-small-size: 0.688rem;
    --sys-label-small-tracking: 0.031rem;
    --sys-label-small-weight: 500;
    --sys-title-large: 400 1.375rem / 1.75rem Roboto, sans-serif;
    --sys-title-large-font: Roboto, sans-serif;
    --sys-title-large-line-height: 1.75rem;
    --sys-title-large-size: 1.375rem;
    --sys-title-large-tracking: 0rem;
    --sys-title-large-weight: 400;
    --sys-title-medium: 500 1rem / 1.5rem Roboto, sans-serif;
    --sys-title-medium-font: Roboto, sans-serif;
    --sys-title-medium-line-height: 1.5rem;
    --sys-title-medium-size: 1rem;
    --sys-title-medium-tracking: 0.009rem;
    --sys-title-medium-weight: 500;
    --sys-title-small: 500 0.875rem / 1.25rem Roboto, sans-serif;
    --sys-title-small-font: Roboto, sans-serif;
    --sys-title-small-line-height: 1.25rem;
    --sys-title-small-size: 0.875rem;
    --sys-title-small-tracking: 0.006rem;
    --sys-title-small-weight: 500;

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

— 28.05.2024 18:56

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

— 29.05.2024 21:11

это работает, но мне это не нравится. надеюсь, что это изменится в какой-нибудь незначительной версии Angular 18

— 03.06.2024 12:16

Я не уверен, почему они выпустили такую сырую версию интеграции Material 3. Это должно быть где-то на стадии предварительного просмотра для разработчиков или только на экспериментальной стадии.

— 07.06.2024 14:39

Как вы можете установить собственные значения типографики, на которые можно ссылаться во всем приложении?

— 08.06.2024 14:58

Я вижу системные переменные, но откуда вы взяли значения каждой из них?

— 08.06.2024 15:04

27.05.2024 20:00